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

user_2015948 0
Viewed 47

I am trying to implement authentication flow with Redux in my app, I am using conditional rendering in my App.js file to show either app screen or authentication screen.

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>

The problem is it doesn't react on changes in the state, when I press Login button on the login screen even though redux refreshes the state, the conditional rendering in App.js doesn't react anyhow and I still see login screen. If I use useState with isUserLoggedIn flag in the App.js, and pass callback to the components it works, but not with Redux.

Please help, what do I do wrong?

redux react-native reactjs javascript
1 Answers

The Redux store.getState is only a function that returns the current state, it doesn't subscribe to changes to the store object. This only works when the component rendering your conditionals is rerendered.

What you can do is either use the subscribe method to subscribe to changes in the store, caching the state locally:

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>

Or you and use the useSelector from react-redux to effectively do the same thing:

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

...

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

Note that both of these solutions absolutely require the Redux store Provider to be moved higher in the ReactTree so that this component can consume the redux context and access the store's value.

user_86908570
Related