Save and retrieve states with redux-persist - Reac

问题:

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

回答1:

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

回答2:

You Can Use

store.getState().whatEver;

回答3:

@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.