CODEWITHSUNDEEP
react-nativereduxredux-persist
Johncy
Johncy

Reputation: 504

How to persist the store values in react native?

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?

Upvotes: 1

Views: 4517

Answers (3)

Johncy
Johncy

Reputation: 504

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>
);
}
}

Upvotes: 0

David
David

Reputation: 16277

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.

Upvotes: 1

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

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.

Upvotes: 5

Related Questions