0
336
ViewsSave 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
3 answers
Answer question0
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
0
@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.
0
You Can Use
store.getState().whatEver;