Web Development What's New

Bootcamp Notes – Day 8 (Thurs) – React Native: Week 3: Persist Redux Store

Bootcamp Notes – Day 8 (Thurs) – React Native: Week 3: Persist Redux Store

Persist Redux Store

There are multiple different approaches we can take as  developers when we consider how we want to save user specific data for an app.

APPROACHES TO SAVING USER-SPECFIC DATA

  • Save data to the server — requires creating user account, authentication, etc.
  • Save data on the client side
  • Or both — save data to the server but save some temporary data on the client side to use offline if network connection is lost.

REDUX-PERSIST

When using REDUX to store application state, we can make use of the Redux persist library. This library will let you save or persist the Redux store to the client-side storage. Then it will let you reload that data or in this library’s terminology rehydrate it.

Redux Persist let’s you persist Redux store to client-side storage then rehydrate it when application reloads. Like Redux, it can be used with any JavaScript application such as mobile apps built with React Native, but also web apps, even desktop apps.

eBay Electronics: Best tech for way less - Up to 50% off and free shipping

IMPLEMENTING REDUX-PERSIST

In the createStore function, replace the combineReducers callback persistCombineReducers.

Supply perisistCombineReducers function with config object with configuration values, including storage type and key.

Pass Redux store to persistStore function, which handles saving Redux state to persistent storage whenever state changes, and returns a persistor object.

Wrap root component with PersistGate component, passing it the persistor, which will delay app rendering until Redux store has completed rehydrating.

Persist Redux Store

  • First, install redux-persist by typing the following at the prompt:  expo install redux-persist@5.9.1

 

configureStore.js 

import {createStore, combineReducers, applyMiddleware} from ‘redux’;
import thunk from ‘redux-thunk’;
import logger from ‘redux-logger’;
import { campsites } from ‘./campsites’;
import { comments } from ‘./comments’;
import { promotions } from ‘./promotions’;
import { partners } from ‘./partners’;
import { favorites } from ‘./favorites’;
import { persistStore, persistCombineReducers } from ‘redux-persist’;
import storage from ‘redux-persist/es/storage’;
const config = {
    key: ‘root’,
    storage,
    debug: true
}
export const ConfigureStore = () => {
    const store = createStore(
        persistCombineReducers(config, {
            campsites,
            comments,
            partners,
            promotions,
            favorites
        }),
        applyMiddleware(thunk, logger)
    );
    const persistor = persistStore(store);
    return { persistor, store };
};

 

App.js 

import React from ‘react’;
import Main from ‘./components/MainComponent’;
import { Provider } from ‘react-redux’;
import { ConfigureStore } from ‘./redux/configureStore’;
import { PersistGate } from ‘redux-persist/es/integration/react’;
import Loading from ‘./components/LoadingComponent’;
const { persistor, store } = ConfigureStore();
export default function App() {
    return (
        <Provider store={store}>
            <PersistGate
                loading={<Loading />}
                persistor={persistor}>
                <Main />
            </PersistGate>
        </Provider>
    );
}

 

Additional Resources:

Tag

Related Posts

You May Have Missed