CODEWITHSUNDEEP
reactjsreact-nativeredux
splunk
splunk

Reputation: 6789

Save and retrieve states with redux-persist - React Native

I'm new to react-native and I'm trying for the first time to save the states of my app.

In order to achieve this I've been suggested to use redux-persist. I expected to find more examples and topics about it in the web and I feel that my idea about how redux-persist works is not that limpid.

I've followed the short guide in the github page but once I close and re-open my app I can't see saved states values but I see the default, initial states values.

This is my app.js file:

import React, { Component } from 'react';
import { AsyncStorage } from 'react-native'
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import { persistStore, autoRehydrate } from 'redux-persist';
import ReduxThunk from 'redux-thunk';
import reducers from './reducers';
import Router from './Router';

class App extends Component {
  render() {
    const store = compose(applyMiddleware(ReduxThunk), autoRehydrate())(createStore)(reducers); 
    persistStore(store, {storage: AsyncStorage}, () => {
        console.log('restored');
    })
    return (
      <Provider store={store}>
        <Router />
      </Provider>
    );
  }
}

export default App;

Do I need something else?

I'd also like to know how I can console.log all the states values inside the redux-persistor storage.

Thanks in advance

Upvotes: 5

Views: 8045

Answers (3)

Ziggy
Ziggy

Reputation: 22375

@just-boris's answer may or may not solve this for you, but regardless you should definitely move the call to persistStore out of the render function for exactly the reasons they mention.

It's hard to tell what's going wrong when there aren't any errors, but I suspect that handling the persist/REHYDRATE action in one of your reducers will help you find the problem.

case 'persist/REHYDRATE': {
  console.log(action.payload) // persist's action uses "payload" not "data"

  return state // NOP, just wanted to log the payload
}

You can also use your browser's inspector tool to inspect local storage, which will give you an idea of what is being stored inside redux-persist.

enter image description here

Upvotes: 1

just-boris
just-boris

Reputation: 9746

You have put persistStore into render method. Persistence call is a side-effect, that should never happen within render.

Move it to componentWillMount, as redux-persist documentation says to you

export default class AppProvider extends Component {

  constructor() {
    super()
    this.state = { rehydrated: false }
  }

  componentWillMount(){
    persistStore(store, {}, () => {
      this.setState({ rehydrated: true })
    })
  }

  render() {
    if(!this.state.rehydrated){
      return <div>Loading...</div>
    }
    return (
      <Provider store={store}>
         {() => <App />}
      </Provider>
    );
  }
}

You need to defer initialization before store will be rendered. This is what this code snippet does

Upvotes: 4

Ahmed Ali
Ahmed Ali

Reputation: 2668

You Can Use

store.getState().whatEver;

Upvotes: 0

Related Questions