Состояние маршрутизатора не сохраняется в реакции с адаптацией

У меня следующая конфигурация redux в react-native с помощью react-native-router-flux и redux-persist. Я хочу получить последний текущий маршрут при обновлении, однако стек маршрута перезаписывается при перезагрузке.

Это 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 }

EDIT: это index.js с его провайдером и сценами:

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>
    )
  }
}

Ответ 1

react-native-router-flux не восстанавливает сцену сам по себе, даже если используется с redux. Redux только отслеживает состояние, поэтому вам нужно, чтобы ваше приложение переходило к предыдущей сцене при запуске, если вы хотите, чтобы ваше состояние навигации сохранялось.

Предполагая, что у вас есть сокращение, работающее с react-native-router-flux, все, что вам нужно сделать, - это подключить исходный компонент приложения к сокращению, чтобы получить свое состояние, а затем изменить сцену, чтобы она соответствовала.

Итак, в вашей начальной стадии компонента, загруженной для вашего приложения, сделайте что-то вроде этого в конце, чтобы получить доступ к вашему хранилищу редуктов:

const mapStateToProps = (state) => {
  const { nav } = state

  return {
    currentScene: nav.scene.name,
  }
}

INITIAL_COMPONENT = connect(mapStateToProps)(INITIAL_COMPONENT)

Затем в одном из ваших методов жизненного цикла этого компонента вы можете перенаправить так:

const { currentScene } = this.props
const initialScene = "Login"

if (currentScene !== initialScene) {
  Actions[currentScene]()
}

Вы также можете передать реквизиты, которые использовались при навигации к последней сцене, или установить сцену по умолчанию, к которой вы хотите перейти, если хранилище редукции не имеет сцены, в которой оно сохраняется. Приложение, над которым я работаю, сейчас прекрасно сохраняется.

Ответ 2

Вам нужно создать свой store следующим образом:

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

autoRehydrate должен быть частью вашего compose. Проверьте этот compose пример.

Ответ 3

Можете ли вы попробовать это, я думаю, что произойдет, это порядок createStore

const enhancers = compose(
  applyMiddleware(...middleware),
  autoRehydrate(),
);

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

Или другое решение должно делать это вручную с помощью import {REHYDRATE} from 'redux-persist/constants' и вызывать его внутри редуктора.