reactjs - example - El estado del enrutador no persiste en react-native con redux

react redux

Question

Tengo la siguiente configuración de redux en react-native usando react-native-router-flux y redux-persist . Deseo recuperar la última ruta actual al actualizar, sin embargo, la pila de ruta se sobrescribe al volver a cargar.

Este es el archivo reducers/index.js

import { combineReducers, createStore, applyMiddleware, compose } from ''redux''
import { persistStore, autoRehydrate } from ''redux-persist''
import { AsyncStorage } from ''react-native''
import logger from ''redux-logger''
import { startServices } from ''../services''
import navigation from ''./navigation''
import devices from ''./devices''
import rooms from ''./rooms''
import { ActionConst } from ''react-native-router-flux''
function routes (state = {scene: {}}, action = {}) {
switch (action.type) {
// focus action is dispatched when a new screen comes into focus
case ActionConst.FOCUS:
return {
...state,
scene: action.scene,
};
// ...other actions
default:
return state;
}
}
export const reducers = combineReducers({
routes,
navigation,
devices,
rooms
})
const middleware = [logger()]
const store = createStore(
reducers,
compose(
autoRehydrate(),
applyMiddleware(...middleware)
)
)
persistStore(store, {storage: AsyncStorage}, function onStoreRehydrate () {
startServices()
})
export { store, reducers }

EDITAR: Este es el index.js con su proveedor y escenas:

import React, { Component } from ''react''
import { store } from ''./reducers''
import { Provider, connect } from ''react-redux''
import { Router, Scene, Actions } from ''react-native-router-flux'';
import Home from ''./containers/home''
import Login from ''./containers/login''
import Device from ''./containers/device''
const scenes = Actions.create(
<Scene key="root">
<Scene key="home" component={Home} />
<Scene key="login" component={Login} />
<Scene key="device" component={Device} />
</Scene>
)
const RouterWithRedux = connect()(Router)
export default class EntryPoint extends Component {
render () {
return (
<Provider store={store}>
<RouterWithRedux scenes={scenes} />
</Provider>
)
}
}

Answer 1

¿Puedes probar esto? Creo que lo que sucede es el orden de la tienda de crear

const enhancers = compose(
applyMiddleware(...middleware),
autoRehydrate(),
);
// Create the store with the (reducer, initialState, compose)
const store = createStore(
reducers,
{},
enhancers
);

O la otra solución debe hacerlo manualmente con import {REHYDRATE} from ''redux-persist/constants'' y llámalo dentro de tu reductor.

Answer 2

Necesitas crear tu store así:

const store = createStore(
reducers,
compose(
applyMiddleware(...middleware),
autoRehydrate(),
)
);

El autoRehydrate necesita ser parte de tu compose . Verifique este ejemplo de compose .

Answer 3

react-native-router-flux no restaura una escena por sí mismo, incluso cuando se usa con redux. Redux solo realiza un seguimiento del estado, por lo que debe tener su aplicación para navegar a la escena anterior al inicio si desea que su estado de navegación persista.

Asumiendo que tienes redux trabajando con react-native-router-flux , todo lo que tienes que hacer es conectar el componente inicial de tu aplicación a redux para obtener tu estado y luego cambiar tu escena para que coincida.

Por lo tanto, en la escena de componente inicial cargada para su aplicación, haga algo como esto al final para obtener acceso a su tienda redux:

const mapStateToProps = (state) => {
const { nav } = state
return {
currentScene: nav.scene.name,
}
}
INITIAL_COMPONENT = connect(mapStateToProps)(INITIAL_COMPONENT)

Luego, en uno de los métodos del ciclo de vida de ese componente, puede redireccionar de la siguiente manera:

const { currentScene } = this.props
const initialScene = "Login"
if (currentScene !== initialScene) {
Actions[currentScene]()
}

También puede pasar los accesorios que se usaron al navegar a la última escena o establecer una escena predeterminada a la que desea ir si el almacén de redux no tiene una escena que persista. La aplicación en la que estoy trabajando ahora es de estado persistente.