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.
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
App.js
Additional Resources:
