Persist store with Redux Toolkit in React-native

Question

I am using redux-persist with redux toolkit. here is my store configuration.

I haven't implemented or configured store before. I intend to persist user state after login. Currently after login, if I reload app in emulator it always goes back to login screen.

is my store configured properly?

updated store file:

import {configureStore} from '@reduxjs/toolkit';
import authReducer from '../features/login/authSlice';
import AsyncStorage from '@react-native-community/async-storage';
import {persistReducer, persistStore} from 'redux-persist';
import {combineReducers} from 'redux';
import hardSet from 'redux-persist/lib/stateReconciler/hardSet';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const reducers = combineReducers({
  auth: authReducer,
  // other reducers goes here...
});

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
//  stateReconciler: hardSet,
};

const _persistedReducer = persistReducer(persistConfig, reducers);

export const store = configureStore({
  reducer: _persistedReducer,
});
export const persistor = persistStore(store);

My index.js file where i wrap my root component with PersistGate

   import React from 'react';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import {store, persistor} from './src/stores/store';
import {Provider} from 'react-redux';
import {storeUser, storeRefreshToken} from './src/features/login/authSlice';
import {PersistGate} from 'redux-persist/lib/integration/react';

const RNRedux = () => (
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>
);

AppRegistry.registerComponent(appName, () => RNRedux);

Error I get currently:

score 0 · Answer 1 · answered Jun 02 '20 at 19:56

I think you need to use persistStore. You should store your app store in persistStore and then use persistGate. PersistGate delays the rendering of your app's UI until your persisted state has been retrieved and saved to redux.

So, your store file can be :

import { persistStore } from 'redux-persist';
const persistor = persistStore(store);
export { persistor, store };

And your app.js will be :

import { store, persistor } from 'path_to_your_store/store';
<Provider store={store}>
          <PersistGate persistor={persistor}>
             </App>
          </PersistGate>
</Provider>

Please check my question again, I updated according to your suggestion. it gives me mentioned error now. — newdeveloper, Jun 02 '20 at 20:28

Kyle Murray · Answer 2 · 2020-09-14T00:40:18.503

This appears to be an issue with redux-persist passing a function as an action type which is not recommended by the Redux devs. Redux Toolkit was developed with defaults to help avoid the creation of breakable code. It's RTK's default middleware "serializableCheck" that throws this error. This middleware can be disabled outright or just for specific actions, and both methods are provided by example in answers to this SO question. RTK middleware documentation here for quick reference.

Here's a blanket solution that should work for you:

- import {configureStore} from '@reduxjs/toolkit';
+ import {configureStore, getDefaultMiddleware} from '@reduxjs/toolkit';
...
export const store = configureStore({
  reducer: _persistedReducer,
+  middleware: getDefaultMiddleware({
+    serializableCheck: false
+  }),
});
...

Persist store with Redux Toolkit in React-native

2 Answers2