CODEWITHSUNDEEP
reactjsreact-nativereduxreact-reduxredux-persist
Sharath Vadlamannati
Sharath Vadlamannati

Reputation: 111

Redux persist v5 not working as it is supposed to

I am making a react native application for which uses redux and redux-persist.

Actual behaviour: When a user logs in and closes the apen and reopens after some time he should directly go into logged in view. But in my application first the loggedout page comes up and after the store is rehydrated it automatically redirects to the loggedin view

App.js is as follows

 // all other import statements
 const { store } = configureStore({});

 class App extends Component {
   constructor() {
    super();
    this.state = {
    isReady: false,
  };
}

render() {
 const { isLoggedIn } = store.getState().auth;
 const Layout = CreateRootNavigator(isLoggedIn);

  return (
    <Provider store={store}>
      <AlertProvider>
        <Root>
          <Layout />
       </Root>
      </AlertProvider>
    </Provider>
  );
 }
}

My createStore.js is as follows which uses redux-persist v5

function configureStore(initialState) {
  let store = createStore(
       persistedReducer,
       initialState,
      compose(applyMiddleware(...middlewares))
    );

  let persistor = persistStore(store);
  // send this persistor also

  return { store };
}

The problem that I face is when I login and close the app and then reopen first theloggedout screen pops up and it automatically redirects to loggedin layout after the store is rehydrated. I probably want a flag or something after the store is rehydrated so that I can actually render the actual thing after store is rehydrated. Please help ... thanks in advance

Upvotes: 0

Views: 1826

Answers (1)

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

It is clearly mentioned in the docs, that you should use PersistGate, to delay the rendering of your UI components.

If you are using react, wrap your root component with PersistGate. This delays the rendering of your app's UI until your persisted state has been retrieved and saved to redux. NOTE the PersistGate loading prop can be null, or any react instance, e.g. loading={<Loading />}

Upvotes: 3

Related Questions