Add Localstorage to Reduxtoolkit
Tags: redux, react, javascript, webdev
Published: 2022-08-03 13:52:49

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.

<h2>Introduction</h2>
<h4>What is a Local Storage?</h4>
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.

![localstorage image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uabxnbhv9p3k1pu7sky0.PNG)

<h4>What is ReduxToolKit?</h4>
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.

![Redux state image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jldw1po3thd2tb3mmda6.PNG)

<h2>How to save my redux state in the localstorage?</h2>
Lucky for us there is a package called **Redux Persist** which is used to store data in the local storage.

<p>To install it type the following in your console:</p>
<pre>
npm i redux-persist
</pre>
or in yarn:
<pre>
yarn add redux-persist
</pre>

<p>Configure your Store.js like this:</p>
<pre>
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
</pre>


<p>Then configure your index.js like this:</p>
<pre>
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')
);
</pre>

<p>After that is done you will now see that the redux state will be saved in your localstorage</p>
![Redux state image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9m7nwrr3nc93gc8qfs3g.PNG)
For more information you can you can read docs of the [Reduxtoolkit](https://redux-toolkit.js.org/usage/usage-guide#use-with-redux-persist).