The right way to use Redux Persist in React Native

Generally, a developer must persist info domestically for a consumer. For instance, let’s say you constructed an ecommerce platform the place customers can add gadgets to their cart with out signing in. You could implement a manner for the app to recollect what gadgets the consumer added to the cart. It’s a foul expertise for the consumer to shut the app for some time, solely to search out that the gadgets they added to the cart are now not there.

One other state of affairs could be when after a consumer signed into your app, they closed the app for a minute, solely to be taken to the login web page to log in once more.

On this article, we’ll discover ways to use Redux Persist to persist the Redux retailer. First, we’ll construct a small to-do utility and arrange its state administration with Redux. Then, we’ll arrange the Redux Persist library for information preservation in situations the place the app is closed. Let’s get began!

Redux Persist and React Native

In React Native functions, information might be endured domestically utilizing AsyncStorage.  AsyncStorage is an asynchronous, persistent, key-value storage system that’s world to the complete app.

Redux Persist is a device used to seamlessly save the appliance’s Redux state object to AsyncStorage. On app launch, Redux Persist retrieves this endured state and saves it again to Redux.

Usually, Redux units the preliminary state of your app upon launch. Quickly after, Redux Persist fetches your endured state, overriding any preliminary state in a course of the Redux Persist workforce calls rehydration.

Redux is an open supply JavaScript library for managing and centralizing utility state. It maintains the state of a whole utility in a single immutable state object, which might’t be modified instantly. When one thing adjustments, a brand new object is created utilizing actions and reducers.

Establishing the undertaking

On this tutorial, we’ll reveal implementing Redux Persist on the Expo snack platform.

Let’s create a folder known as screens. Inside it, create a file known as Todo.js, which can include the enter subject so as to add to-dos and likewise show the to-dos added:

import React from 'react';
import { StyleSheet, Textual content, View } from 'react-native';

export default perform BooksListApp() {
  return (
    <View fashion={types.container}>
        <Textual content fashion={types.paragraph}>React Native ToDo App with Redux Persist </Textual content>
          <Textual content fashion={types.title}> Add ToDo Right here</Textual content>
          <TextInput
            fashion={types.enter}
            mode="outlined"
            label="Process"
            worth={activity}
             onChangeText={activity => setTask(activity)}
          />
          <Button title="Add" colour="#841584"  />
      <FlatList
        information={todos}
        keyExtractor={(merchandise) => merchandise.id}
        renderItem={({merchandise, index}) => {
          return (
              <Textual content fashion={types.listing}>{merchandise.activity}</Textual content>
          );
        }}
      />
    </View>
  );
}

const types = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 10,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'daring',
    textAlign: 'middle',
  },
  title: {
    margin: 10,
    fontSize: 16,
    fontWeight: 'daring',
    textAlign: 'middle',
  },
  listing: {
    fontSize: 18,
    fontWeight: 'daring',
    textAlign: 'middle',
  },
  enter: {
    peak: 40,
    margin: 12,
    borderWidth: 1,
    padding: 10,
  },
});

Establishing Redux

To arrange Redux, first set up it with the next code:

npm set up redux

Creating motion creators

With Redux, the state of the entire utility is managed by one JavaScript object. To make adjustments to that object, we will dispatch actions.

Let’s create one other folder known as redux for state administration. Inside it, let’s create an motion.js file to arrange the motion varieties and motion creators:

export const ADD_TODO = "ADD_TODO";

let todoId = 0;

export const addTodo = activity => ({
  kind: ADD_TODO,
  payload: {
    id: ++todoId,
    activity
  }
});

The motion kind ADD_TODO is self-explanatory. We name it when we have to replace the state by including a brand new todo.

Creating the reducer

When an motion has been dispatched, a reducer updates the state by making the adjustments to the state object. The reducer is a pure perform that takes two inputs, the state and motion, and should return the default state.

Let’s create one other file within the redux folder and import the motion kind we created earlier. We’ll additionally create an preliminary app state:

import { ADD_TODO } from "./motion";

const initialState = {
  todos: []
};

const todoReducer = (state = initialState, motion) => {
  swap (motion.kind) {
    case ADD_TODO: {
      const { id, activity } = motion.payload
      return {
        ...state,
        todos: [ ...state.todos, { id, task }]
      };
    }
    default:
      return state;
  }
}

export default todoReducer;

Within the code above, we outlined a reducer perform, todoReducer, which takes initialState because the default worth for the primary argument and motion because the second argument.

Establishing the Redux retailer

The Redux retailer holds the state on the utility degree in order that it may be accessed from any element. The Redux retailer is an object that brings actions and reducers collectively.

We’ll use the createStore technique from Redux to configure a Redux retailer. It takes the reducer as an argument.

Create a retailer.js file contained in the redux folder and initialize the Redux retailer as follows:

import { createStore } from "redux";
import todoReducer from './reducers';

export default createStore(todoReducer);

Subsequent, we’ll make the Redux retailer globally obtainable by wrapping the complete app in a better order element known as Supplier and passing the shop to it.

Within the App.js file, import Supplier from React Redux and wrap the app in it:

import retailer from './redux/retailer';
import { Supplier } from 'react-redux';

const App = () => {
  return (
    <Supplier retailer={retailer}>
      <MyTodo/>
    </Supplier>
  );
}

export default App;

Within the code above, we’ve got made a connection between the React elements and the Redux retailer and state. Due to this fact, any element on this utility can entry the app’s state at any level.

Dispatching an motion

With Redux arrange, let’s write a perform that may dispatch an motion when a consumer provides a to-do merchandise. In Todo.js, add the code under:

import { useSelector, useDispatch } from 'react-redux';
import { addTodo } from './redux/motion';

const [task, setTask] = React.useState('');
  const  todoList  = useSelector(state => state.todos);
  const dispatch = useDispatch();


  const handleAddTodo = () => {
    dispatch(addTodo(activity))
    setTask('')
  }

We imported the useSelector Hook from React Redux for getting the state on this element and useDispatch for dispatching an motion. We then name the perform when the Add button is clicked:

<Button title="Add" colour="#841584" onPress={handleAddTodo} />

Now, once we add an merchandise within the enter subject and click on the button, the addTodo motion creator known as, which, in flip, dispatches the ADD_TODO motion to the reducer in order that the merchandise is added and the app’s state is up to date.

At this level, you’ll discover that the reducer is working, and we’ve got our to-do app up and working. However, you’ll discover that once we shut the appliance for some time and open it once more, all of the gadgets we added are gone, indicating that the Redux state has been reset to preliminary state.

We are able to persist the gadgets we added utilizing Redux Persist. Due to this fact, even once we shut the appliance and open it once more, we don’t lose our to-do gadgets.

Integrating Redux persist

Let’s set up the Redux Persist package deal and the React Native AsyncStorage package deal with the next command:

npm i redux-persist @react-native-async-storage/async-storage

We’ll import persistStore, persistReducer from Redux Persist and add the next configuration:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage' 

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

To create the configuration for React Persist, you move the important thing and the storage engine, that are required. There are different non-obligatory configurations like whitelist, blacklist, model, stateReconciler, and debug. Should you don’t need to persist part of your state, you might put it within the blacklist. Alternately, the whitelist defines the components of the state you want to persist.

Now, we’ll name the persistReducer, passing within the config object and our todoReducer.
We additionally export the persistor, which is an object that’s returned by persistStore that wraps the unique retailer:

const persistedReducer = persistReducer(persistConfig, todoReducer)

export const retailer = createStore(persistedReducer)
export const persistor = persistStore(retailer)

On the finish of the configuration, our retailer.js will appear like the next code:

import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistStore, persistReducer } from 'redux-persist'

import todoReducer from './reducers';
import { createStore } from 'redux'
import storage from 'redux-persist/lib/storage' 

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

const persistedReducer = persistReducer(persistConfig, todoReducer)

export const retailer = createStore(persistedReducer)
export const persistor = persistStore(retailer)

Then, we replace App.js by importing PersistGate and wrapping the app in it:

import * as React from 'react';
import { Textual content } from 'react-native';
import { PersistGate } from 'redux-persist/integration/react'
import MyTodo from './Todo';


import {retailer, persistor} from './redux/retailer';
import { Supplier } from 'react-redux';

const App = () => {
  return (
    <Supplier retailer={retailer}>
    <PersistGate loading={<Textual content>Loading...</Textual content>} persistor={persistor}>
      <MyTodo/>
    </PersistGate>
    </Supplier>
  );
}

export default App;

Redux Persist persists the Redux retailer for us within the AsyncStorage. Even once we depart the app and are available again later, it fetches the information from AsyncStorage and initializes the Redux retailer with it.

Conclusion

On this article, we reviewed what Redux Persist is and learn how to set it up in a React Native utility. Redux Persist is useful when it is advisable persist login periods and different info with out a database. It enormously improves the consumer expertise by permitting your customers to exit and return to your utility with out dropping their information. I hope you loved this text, and make sure to depart a remark if in case you have any questions. Pleased coding!