How to Implement Redux-Persist for localStorage Management Using Redux/Toolkit

Recently, I built an e-commerce application where I wanted to persist my cart in localStorage. I was using Redux/Toolkit for global state management, and whenever I dispatched an action that would alter my cart, I would throw a middleware error. After much research, I have learned that changing localStorage within a reducer is considered to be a side effect and should be avoided. A good way to resolve this issue is by implementing the use of Redux Persist.

After a brief explanation of what this NPM library does, this blog will serve as a step-by-step tutorial for setting up a React/Redux Toolkit application to handle localStorage.

Redux-Persist

Redux-Persist is a library that works on top of AsyncStorage to keep track of the state which your store manages. It provides a better way to store and retrieve more complex data.

Step One: Install Redux-Persist

Step Two: Import (store.js)

ConfigureStore is a function which encapsulates our store creation logic. This will be used towards the bottom of our store.js file.

Importing storage from “redux-persist/lib/storage” defines the storage engine you will use. Redux Persist supports many different storage backends, but will default to using localStorage.

Importing combineReducers will give you access to a function that combines your reducers in an object with key/value pairs. The use of this function was eliminated with Redux Toolkit’s use of configureStore, however in using Redux Persist, we will pass this reducer function as a parameter into the next function we will import.

Importing persistReducer gives you access to a function that accepts a configuration objects as its first parameter and the value of combinedReducers as its second parameter.

Step Three: Import Reducers and Utilize combineReducers Function

Import your reducers from respective slices and pass as key/value pairs into your combineReducers function. Set this value to a variable.

Step Four: Create Configuration Object

To create your configuration object, you will need key (often with a value of ‘root’) and to specify which storage backend you will use.

Step Five: Utilize persistReducer Function

Pass your configuration object (persistConfig) and your reducer function (reducers) into your persistReducer function and set it equal to a variable.

Step Six: Configure & Export Store

Pass an object with a key of reducer set to the value of the persistedReducer function you created in the step above and export below.

Step Seven: Import (index.js)

Step Eight: Set Variable Equal to Persisted Store

Pass your store into the persistStore function that you imported and set it equal to a variable. This will ensure that your state is saved to persisted storage whenever it changes.

Step Nine: Wrap Root Component with PersistGate

Wrapping your root component with PersistGate will delay the rendering of your app’s UI until your persisted state has been retrieved and saved to redux. -docs

Pass into your PersistGate component a loading prop and a persistor prop. The loading prop can be set to null or any react component. The persistor prop will be set equal to the persistor variable you created in the step above.

Step Ten: You Did It!

Congratulations! You have successfully implemented Redux Persist to handle localStorage management in a React/Redux Toolkit application. I hope you have found this tutorial helpful. I encourage you to check out Redux Persist’s documentation for additional information and ways to selectively persist your store. Thanks so much for reading.