How to persist the store values in react native? - react-native

Question

In my application,the home page fetches the Json response from my rest API.Then I add the products into the cart array.Initially,my store values are..
const DEFAULT_STATE_TRENDING = {
data:{},
specialoffdata:[],
banner:[],
offerstitle:[],
cart:[],
cartcount:0,
isFetching:false,
dataFetched:false,
error:false,
}
After i added the products the cart array and cart count becomes..
cart:[{...},{...}],
cartcount:cart.length
Now, i close my app.After reloading the app,the cart array becomes empty.How to persist the store values here?

Answer 1

The best way to persist the store values is by using this awesome library. Redux Persist
It contains various methods and levels of persistance, with the ease of use.
Installation and basic usage is well documented on their github docs.

Answer 2

The simplest approach is to use AsyncStorage
let response = await AsyncStorage.getItem('count'); //Read
AsyncStorage.setItem('count', this.state.count + '');
This way, you can access the 'count' in every component.
The most modern way is to use react's new context api, you define the context provider and consume it everywhere:
const ThemeContext = React.createContext('light')
class ThemeProvider extends React.Component {
state = {theme: 'light'}
render() {
return (
<ThemeContext.Provider value={this.state.theme}> //<--- 'light' is exposed here
{this.props.children}
</ThemeContext.Provider>
)
}
}
class App extends React.Component {
render() {
return (
<ThemeProvider>
<ThemeContext.Consumer>
{item => <div>{item}</div>} //<-- you consume the value ('light') here
</ThemeContext.Consumer>
</ThemeProvider>
)
}
}
Either way, it is much lighter and easier than Redux or MobX.

Answer 3

I used the AsyncStorage.In this way i persisted my store state values even after reloading,closing and opening app.
configureStore.js:
import {createStore, applyMiddleware,compose} from 'redux';
import thunk from 'redux-thunk';
import { autoRehydrate } from 'redux-persist';
import allReducers from './reducers';
import { AsyncStorage } from 'react-native';
const middleware = [ thunk,
];
export default function configureStore() {
let store= createStore(
allReducers,
{},
compose(applyMiddleware(...middleware),autoRehydrate())
);
console.log("Created store is"+store);debugger
return store;
}
App.js:
const store = configureStore();
export default class App extends Component {
componentDidMount() {
console.log("App.js started and its store value is"+store);debugger
SplashScreen.hide()
persistStore(
store,
{
storage : AsyncStorage,
whitelist : ['trending']
}
);
}
render() {
return (
<Provider store={store}>
<MyStack/>
</Provider>
);
}
}