Add Localstorage to Reduxtoolkit

Are you annoyed that your saved data disappear whenever you refresh the page? There are many ways of saving your data, such as saving it in the localstorage, session storage, or in a database. This tutorial is how you can store reduxtoolkit data in your localstorage.

I presumed in reading this that you already have a working app that uses reduxtoolkit and searching on ways to store the data, so I won't explain details on the installation of reduxtoolkit and such.

Introduction

What is a Local Storage?

A place where you can store your browser data. The stored data is a key-value pair which can persist even after reload or browser is closed.
You can access your storage data in google chrome by using inpect tool, then go to the application tab. There you can see the stored data in your localstorage.

What is ReduxToolKit?

Redux in simple terms is a package which has the ability to store the state of variables globally. Reduxtoolkit is a package is intended to be the standard way to write Redux logic. It solves the problems with redux such as the: Complicated redux store, Multiple broiler plates, and lots of packages needed to work.

How to save my redux state in the localstorage?

Lucky for us there is a package called Redux Persist which is used to store data in the local storage.

To install it type the following in your console:

npm i redux-persist

or in yarn:

yarn add redux-persist

Configure your Store.js like this:

import { configureStore } from '@reduxjs/toolkit'
import fetchPokemons from './reducers/pokemonSlice'
import pokemonTeam from './reducers/pokemonTeamSlice'
import storage from 'redux-persist/lib/storage'
import {combineReducers} from "redux"; 
import { persistReducer } from 'redux-persist'

const reducers = combineReducers({
  fetchPokemons,
  pokemonTeam     
 });

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

const persistedReducer = persistReducer(persistConfig, reducers)

const Store = configureStore({
  reducer: persistedReducer
})

export default Store

Then configure your index.js like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {Provider} from 'react-redux';
import Store from './Store';
import {BrowserRouter} from 'react-router-dom';
import { PersistGate } from 'redux-persist/integration/react'
import { persistStore } from 'redux-persist'
let persistor = persistStore(Store);

ReactDOM.render(
  < React.StrictMode>
    < BrowserRouter>
      < Provider store={Store}>
        < PersistGate loading={null} persistor={persistor}>
          < App />
        < /PersistGate>
      < /Provider>
    < /BrowserRouter>
  < /React.StrictMode>,
  document.getElementById('root')
);

After that is done you will now see that the redux state will be saved in your localstorage

For more information you can you can read docs of the Reduxtoolkit.