如何在 App js 文件中使用条件渲染和 Redux？

Question

我正在尝试在我的应用程序中使用 Redux 实现身份验证流程，我在 App.js 文件中使用条件渲染来显示应用程序屏幕或身份验证屏幕。

App.js:

    <Provider store={store} >
      <NavigationContainer>
        {store.getState().auth.initializing && <Initializing />}
        {store.getState().auth.isLoggedIn && (
          <AppNavigator/>
        )}
        {!store.getState().auth.initializing &&
          !store.getState().auth.isLoggedIn && (
          <AuthenticationNavigator/>
        )}
      </NavigationContainer>
    </Provider>

问题是它对状态的变化没有反应，当我在登录屏幕上按下登录按钮时，即使 redux 刷新了状态，App.js 中的条件渲染无论如何也没有反应并且我仍然看到登录屏幕。如果我在 App.js 中使用带有 isUserLoggedIn 标志的 useState，并将回调传递给它工作的组件，但不使用 Redux。

请帮忙，我做错了什么？

Answer 1

Redux store.getState 只是一个 returns 当前状态的函数，它不订阅对存储对象的更改。这仅在重新呈现呈现条件的组件时有效。

你可以做的是使用 subscribe 方法订阅商店中的变化，在本地缓存状态：

const [auth, setAuth] = React.useState(() => store.getState().auth);

useEffect(() => {
  const unsubscribe = store.subscribe(() => {
    setAuth(store.getState().auth);
  });

  return unsubscribe;
}, []);

...

<NavigationContainer>
  {auth.initializing && <Initializing />}
  {auth.isLoggedIn && (
    <AppNavigator/>
  )}
  {!.auth.initializing &&
    !.auth.isLoggedIn && (
    <AuthenticationNavigator/>
  )}
</NavigationContainer>

或者您使用 react-redux 中的 useSelector 来有效地做同样的事情：

const auth = useSelector(state => state.auth);

...

<NavigationContainer>
  {auth.initializing && <Initializing />}
  {auth.isLoggedIn && (
    <AppNavigator/>
  )}
  {!.auth.initializing &&
    !.auth.isLoggedIn && (
    <AuthenticationNavigator/>
  )}
</NavigationContainer>

请注意，这两个解决方案 绝对需要 Redux 存储 Provider 在 ReactTree 中移动到更高的位置，以便该组件可以使用 redux 上下文并访问存储的值。

如何在 App js 文件中使用条件渲染和 Redux？

How to use Conditional Rendering and Redux in App js file?

javascript

reactjs

react-native

redux