Persist state with Redux Persist utilizing Redux Toolkit in React

With the Redux Persist library, builders can save the Redux retailer in persistent storage, for instance, the native storage. Subsequently, even after refreshing the browser, the positioning state will nonetheless be preserved. Redux Persist additionally contains strategies that enable us to customise the state that will get persevered and rehydrated, all with an simply comprehensible API.

On this article, we’ll discover ways to use Redux Persist with Redux Toolkit in React. To observe together with this text, you ought to be conversant in React and Redux Toolkit. You also needs to have Node.js put in in your machine.

Organising React

I’ve already created an app that makes use of Redux Toolkit for state administration. We’ll use it on this tutorial to learn the way Redux Persist works. To begin, clone the GitHub repo. You are able to do so with the next instructions:

$ git clone https://github.com/Tammibriggs/auth-app.git

$ cd auth-app

$ npm set up

Subsequent, we will begin the app with the npm begin command. In our app, we’ll see a kind that has a subject to enter our identify and e mail. After coming into the required inputs and submitting the shape, we’ll be taken to our profile web page, which can look just like the next picture:

After we refresh the browser, our information will likely be misplaced. Let’s discover ways to use Redux Persist to save lots of the state in persistent storage in order that even after a refresh, the information will nonetheless stay intact. We‘ll additionally discover ways to customise what’s persevered and specify how incoming states will likely be merged. Let’s get began!

Persisting state with Redux Persist

First, we’ll add Redux Persist to our app with the next command:

$ npm i redux-persist

Subsequent, we have to modify our retailer, which we’ll discover the in redux folder within the src listing of the cloned app. Presently, our retailer seems to be just like the code under:

// src/redux/retailer.js
import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./slices/userSlice";

export const retailer = configureStore({
  reducer: userReducer,
  devTools: course of.env.NODE_ENV !== 'manufacturing',
})

We’ll make the next modifications to our retailer.js file to make use of Redux Persist:

// src/redux/retailer.js
import { configureStore } from "@reduxjs/toolkit";
import userReducer from "./slices/userSlice";
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';
import thunk from 'redux-thunk';

const persistConfig = {
  key: 'root',
  storage,
}

const persistedReducer = persistReducer(persistConfig, userReducer)

export const retailer = configureStore({
  reducer: persistedReducer,
  devTools: course of.env.NODE_ENV !== 'manufacturing',
  middleware: [thunk]
})

export const persistor = persistStore(retailer)

Within the code above, we changed the worth of the reducer property within the retailer from userReducer to persistedReducer, which is an enhanced reducer with configuration to persist the userReducer state to native storage. Except for native storage, we will additionally use different storage engines like sessionStorage and Redux Persist Cookie Storage Adapter.

To make use of a special storage engine, we simply want to switch the worth of the storage property of persistConfig with the storage engine we need to use. For instance, to make use of the sessionStorage engine, we’ll first import it as follows:

import storageSession from 'reduxjs-toolkit-persist/lib/storage/session'

Then, modify persistConfig to seem like the next code:

const persistConfig = {
  key: 'root',f
  storageSession,
}

Within the modification to the shop above, we additionally included the Thunk middleware, which can intercept and cease non-serializable values in motion earlier than they get to the reducer. When utilizing Redux Persist with out utilizing the Thunk middleware, we‘d get an error within the browser’s console studying a non-serializable worth was detected within the state.

Lastly, we handed our retailer as a parameter to persistStore, which is the operate that persists and rehydrates the state. With this operate, our retailer will likely be saved to the native storage, and even after a browser refresh, our information will nonetheless stay.

In most use instances, we’d need to delay the rendering of our app’s UI till the persevered information is accessible within the Redux retailer. For that, Redux Persist contains the PersistGate element. To make use of PersistGate, go to the index.js file within the src listing and add the next import:

// src/index.js
import { persistor, retailer } from './redux/retailer';
import { PersistGate } from 'redux-persist/integration/react';

Now, modify the render operate name to seem like the code under:

// src/index.js
root.render(
  <React.StrictMode>
    <Supplier retailer={retailer}>
      <PersistGate loading={null} persistor={persistor}>
        <App />
      </PersistGate>
    </Supplier>
  </React.StrictMode>
);

On this part, we lined the fundamental setup when utilizing Redux Persist. Now, let’s discover the out there choices and use instances for Redux Persist.

Nested persists utilizing Redux Persist

If we’ve got two or extra reducers in Redux Toolkit, like userReducer and notesReducer, and we need to add them to our retailer, we’ll doubtless configure the shop as follows:

const retailer = configureStore({
  reducer: {
    consumer: userReducer,
    notes: notesReducer
  },
})

We are able to additionally use combineReducers as follows, which does the identical factor:

const rootReducer = combineReducers({ 
  consumer: userReducer,
  notes: NotesReducer
})

const retailer = configureStore({
  reducer: rootReducer
})

To make use of Redux Persist on this case, we’ll provide rootReducer as a parameter of persistReducer, then substitute rootReducer in our retailer with the persevered reducer as follows:

const rootReducer = combineReducers({ 
  consumer: userReducer,
  notes: NotesReducer
})

const persistedReducer = persistReducer(persistConfig, rootReducer)

const retailer = configureStore({
  reducer: persistedReducer
})

Nonetheless, what if we need to set a special configuration? For instance, let’s say we need to change the storage engine for the userReducer to sessionStorage. To take action, we will use nested persists, a function that permits us to nest persistReducer, giving us the power to set completely different configurations for reducers.

Beneath is an instance of a nested persist the place I’m altering the storage of the userReducer to sessionStorage:

const rootPersistConfig = {
  key: 'root',
  storage,
}

const userPersistConfig = {
  key: 'consumer',
  storage: storageSession,
}

const rootReducer = combineReducers({
  consumer: persistReducer(userPersistConfig, userReducer),
  notes: notesReducer
})

const persistedReducer = persistReducer(rootPersistConfig, rootReducer)

const retailer = configureStore({
  reducer: persistedReducer
})

Specify how the incoming state is merged

Merging entails saving the persevered state again within the Redux retailer. When our app launches, our preliminary state is about. Shortly after, Redux Persist retrieves our persevered state from storage, then overrides any preliminary state. This course of works routinely.

By default, the merging course of auto merges one degree deep. Let’s say we’ve got an incoming and preliminary state like the next:

{consumer: {identify: 'Tammibriggs'}, isLoggedIn: true} // incoming state
{ consumer: {identify: '', e mail: ''}, isLoggedIn: false, standing: 'Pending'} // preliminary state

The merged state will seem like the next code:

{ consumer: {identify: 'Tammibriggs'}, isLoggedIn: true, standing: 'Pending'} // reconciled/merged state

The preliminary state was merged with the incoming state and the top-level property values. Within the incoming state, these are changed and never merged, which is why the e mail property in consumer was misplaced. In our code, this can look just like the next:

const mergedState = { ...initialState };

mergedState['user'] = persistedState['user']
mergedState['isLoggedIn'] = persistedState['isLoggedIn']

This sort of merging in Redux Persist is named autoMergeLevel1, and it’s the default state reconciler in Redux Persist. Different state reconcilers embody hardSet, which fully overrides the preliminary state with the incoming state, and autoMergeLevel2, which merges two ranges deep.

In our earlier instance, the e mail property in consumer received’t be misplaced. The reconciled or merged state will seem like the next code:

{ consumer: {identify: 'Tammibriggs' e mail:''}, isLoggedIn: true, standing: 'Pending'} // reconciled/merged state

For instance, to arrange a state reconciler, if we need to use autoMergeLevel2, we simply must specify a stateReconciler property in persistConfig:

import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const persistConfig = {
  key: 'root',
  storage,
  stateReconciler: autoMergeLevel2
}

Customise what’s persevered

We are able to customise part of our state to persist by utilizing the blacklist and whitelist properties of the config object handed to persistReducer. With the blacklist property, we will specify which a part of state to not persist, whereas the whitelist property does the alternative, specifying which a part of the state to persist.

For instance, let’s say we’ve got the next reducers:

const rootReducer = combineReducers({ 
  consumer: userReducer,
  notes: notesReducer
})

If we need to forestall notes from persisting, the config object ought to seem like the next:

const rootPersistConfig = {
  key: 'root',
  storage,
  blacklist: ['notes']
}

// OR

const rootPersistConfig = {
  key: 'root',
  storage,
  whitelist: ['users']
}

The blacklist and whitelist properties take an array of strings. Every string should match part of the state that’s managed by the reducer we move to persistReducer. When utilizing blacklist and whitelist, we will solely goal one degree deep. However, if we need to goal a property in one in every of our states above, we will reap the benefits of nested persist.

For instance, let’s say the userReducer preliminary state seems to be like the next:

const initialState = {
  consumer: {},
  isLoggedIn: false,
}

If we need to forestall isLoggedIn from persisting, our code will seem like the next:

const rootPersistConfig = {
  key: 'root',
  storage,
}

const userPersistConfig = {
  key: 'consumer',
  storage,
  blacklist: ['isLoggedIn']
}

const rootReducer = combineReducers({
  consumer: persistReducer(userPersistConfig, userReducer),
  notes: notesReducer
})

const persistedReducer = persistReducer(rootPersistConfig, rootReducer);

Now, the isLoggedIn property received’t be persevered.

Conclusion

On this tutorial, we’ve realized the way to use Redux Persist in Redux Toolkit to save lots of our information in persistent storage. Subsequently, our information will nonetheless stay even after a browser refresh. We additionally explored a number of choices for customizing Redux Persist, for instance, specifying which storage engine to make use of, and customizing what’s persevered in our state utilizing the blacklist and whitelist properties.

Though on the time of writing, Redux Persist is underneath upkeep and has not been up to date for a while, it’s nonetheless an important software with robust group help. I hope you loved this tutorial, and you should definitely depart a remark you probably have any questions.