0%
June 21, 2023

Quick Step to Make a Reducer Persist its Data

react

redux

Step 1

First we npm install redux-persist, then we create our store as usual.

1export const store = configureStore({
2  reducer: {
3    user: userSlice.reducer,
4    application: appSlice.reducer,
5    projects: projectSlice.reducer,
6    companies: companySlice.reducer,
7    template: templateSlice.reducer,
8    fakeTime: fakeTimeSlice.reducer,
9    wbusers: wbuserSlice.reducer,
10    wbcategories: categorySlice.reducer
11  },
12  devTools: true,
13  //@ts-ignore
14  middleware: (gDM) => gDM().concat(
15    templateMiddleware.middleware,
16    projectMiddleware.middleware,
17    fakeTimeMiddleware.middleware,
18    wbuserMiddlwares.middleware,
19    categoryMiddleware.middleware,
20    companyMiddleware.middleware
21  )
22});

Step 2

For reducer whose data we want to persist, we add the corresponding config one by one:

const userPersistConfig = {
  key: "user",
  storage,
  stateReconciler: autoMergeLevel2,
};

Next we change the root reducer part in line 5 accordingly:

1import persistStore from "redux-persist/es/persistStore";
2
3export const store = configureStore({
4  reducer: {
5    user: persistReducer<ReturnType<typeof userSlice.reducer>>(userPersistConfig, userSlice.reducer),
6    application: applicationPersistConfig, appSlice.reducer,
7    projects: projectSlice.reducer,
8    companies: companySlice.reducer,
9    template: templateSlice.reducer,
10    fakeTime: fakeTimeSlice.reducer,
11    wbusers: wbuserSlice.reducer,
12    wbcategories: categorySlice.reducer
13  },
14  devTools: true,
15  //@ts-ignore
16  middleware: (gDM) => gDM().concat(
17    templateMiddleware.middleware,
18    projectMiddleware.middleware,
19    fakeTimeMiddleware.middleware,
20    wbuserMiddlwares.middleware,
21    categoryMiddleware.middleware,
22    companyMiddleware.middleware
23  )
24});
25
26export const persistor = persistStore(store);

Step 3

Finaly we wrap our main view component in App.tsx by using the PersistGate and the exported persistor:

//App.tsx

<Provider store={store}>
  <PersistGate loading={null} persistor={persistor}>
    ...
    <AppRoutes />
    ...
  </PersistGate>
</Provider>