如何在React Native中使用React Navigation v5访问App内部的reducer？

Question

我正在尝试使用React Navigation v5构建应用程序，并停留在身份验证流程中。这是一些代码来了解我要做什么：

const Stack = createStackNavigator();
const Drawer = createDrawerNavigator();
const AuthContext = React.createContext();

export default class App extends Component {
  // constructor() ...

render() {
  const store = configureStore(); // rootReducer

  return (
    <AuthContext.Provider store={store}>
      <NavigationContainer>
        // here I have to access my userReducer to check is user logged in and using LoginStack or Drawer
)
        // my stacks
}

因此，在React Navigation docs中，身份验证流使用功能组件和它们内部的React Hooks。但是我正在使用类组件，并且我的reducer在独立文件中。我尝试像往常一样在应用程序的子组件中使用connect（），但这无法正常工作。

那么，有什么方法可以在最顶层访问reducer到App？也许我做错了什么，并且有更好的方法基于身份验证在2个单独的堆栈之间建立切换？

Answer 1

不确定这是否是最好的方法，但是您只需要使用react钩子和redux订阅：

export default function Navigation({store}) {

  const [authorized, setAuthorized] = useState(
    store.getState().user.auth !== null,
  );

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setAuthorized(store.getState().user.auth !== null);
    });

    return () => { unsubscribe(); }
  });

  return (
    <NavigationContainer>
      {authorized ?
        <Stack.Navigator>...</Stack.Navigator> : <Stack.Navigator>...</Stack.Navigator>}
    </NavigationContainer>
  )
}

然后通过您的商店：

export default class App extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Navigation store={store} />
      </Provider>
    );
  }
}