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.