Using redux-toolkit with redux-persist for React Native
By: Sayan Chakraborty
Tags: Redux Toolkit, Redux Persist, React Native, Redux

Lets get started then!

You primarily need these two packages

Redux-toolkit : https://redux-toolkit.js.org/

Redux persist :https://www.npmjs.com/package/redux-persist

After you have them installed you need to setup your redux store. The convention is make a folder named store and then create a file in it called index.js.

Now that you have this setup. Lets start coding!!!

Make the following imports

import { createSlice, configureStore } from ‘@reduxjs/toolkit’;

import { persistReducer, persistStore } from 'redux-persist';

So now lets make our first slice.

const farmerInitialState = { farmerName: 'default', farmerDocId: 'default', }; const farmerSlice = createSlice({ name: 'farmer', initialState: farmerInitialState, reducers: { newFarmer(state, action) { state.farmerName = action.payload.farmerName; state.farmerDocId = action.payload.farmerDocId; }, } });

Over here I am making a slice to address some farmerData, It can be anything else you like.

Next let’s make the user slice:

//user slice defination const userInitialState = { isAuthenticated: false, userUid: "", userDocId: "", userEmail: "", }; const userSlice = createSlice({ name: 'user', initialState: userInitialState, reducers: { login(state, action) { state.isAuthenticated = action.payload.isAuthenticated; state.userUid = action.payload.userUid; state.userDocId = action.payload.userDocId; state.userEmail = action.payload.userEmail; }, logout(state) { state.isAuthenticated = false; state.userUid = ""; state.userDocId= ""; state.userEmail= ""; } } });

As you can see we have two reducers here: One for logging in the user, One for logging out the user.

Now to some important notes. Redux store works completely in sync. But to store user state me need to use something called async storage. It stores the data and brings it back to the redux store once the app is reloaded.

Install async-storage : https://www.npmjs.com/package/@react-native-async-storage/async-storage

And import it

import AsyncStorage from '@react-native-async-storage/async-storage';

Now we need to decide which reducer of the redux store we need to persist. In this example we are persisting the user slice. Thus we need to provide the config for the same. We define it as follows:

const persistConfig = { key: 'user', storage: AsyncStorage, };

Now we have the reducer for our user slice. Let’s change that to a persisted reducer.

const persisterReducer = persistReducer(persistConfig, userSlice.reducer);

Now we are ready to create our store with all these details. Just a small hitch, as I mentioned redux store generally works in sync but we are using async storage here, thus we need to provide the right middleware here to perform that. There are 2 middlewares you would need. They are:

redux-thunk : https://www.npmjs.com/package/redux-thunk

redux-logger : https://www.npmjs.com/package/redux-logger

Well technically, logger isn’t a necessity as it only provides logs when your redux store is rehydrated.

Yes, initializing the store back with data after reload in called rehydrating, quite clever!

Now lets import there middlewares and create the store.

import logger from 'redux-logger'; import thunk from 'redux-thunk'; const store = configureStore({ reducer: { farmer: farmerSlice.reducer, user: persisterReducer, }, middleware: [thunk, logger], });

Make sure you make the necessary exports and Voila! Your store with a persisted reducer is ready to be used. To persist the state use the isAuthenticated parameter in your app root.