0
329
VistasGuardar y recuperar estados con redux-persist - React Native
Soy nuevo en react-native y estoy tratando por primera vez de guardar los estados de mi aplicación.
Para lograr esto, me sugirieron usar redux-persist . Esperaba encontrar más ejemplos y temas al respecto en la web y siento que mi idea sobre cómo funciona redux-persist no es tan límpida.
Seguí la guía breve en la página de github, pero una vez que cierro y vuelvo a abrir mi aplicación, no puedo ver los valores de estado guardados, pero veo los valores de estado iniciales predeterminados.
Este es mi archivo app.js:
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;¿Necesito algo más?
También me gustaría saber cómo puedo console.log . registrar todos los valores de estado dentro del almacenamiento de redux-persistor.
Gracias por adelantado
3 Respuestas
Responde la pregunta0
Ha puesto persistStore en el método de render . La llamada de persistencia es un efecto secundario, que nunca debería ocurrir dentro del render .
Muévalo a componentWillMount , como le dice la documentación de redux-persist
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> ); } }Debe diferir la inicialización antes de que se represente la tienda. Esto es lo que hace este fragmento de código
0
La respuesta de @ just-boris puede o no resolver esto por usted, pero a pesar de todo, definitivamente debe mover la llamada a persistStore fuera de la función de render exactamente por las razones que mencionan.
Es difícil saber qué va mal cuando no hay ningún error, pero sospecho que manejar la acción persist/REHYDRATE en uno de sus reductores lo ayudará a encontrar el problema.
case 'persist/REHYDRATE': { console.log(action.payload) // persist's action uses "payload" not "data" return state // NOP, just wanted to log the payload } También puede usar la herramienta de inspección de su navegador para inspeccionar el almacenamiento local, lo que le dará una idea de lo que se almacena dentro redux-persist .
0
Puedes usar
store.getState().whatEver;