路由器状态不会在带有 redux 的 react-native 中持久化

Question

我使用 react-native-router-flux 和 redux-persist 在 react-native 中进行了以下 redux 配置。我想在刷新时检索最后一个当前路由，但是路由堆栈在重新加载时被覆盖。

这是 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 }

编辑：这是 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>
    )
  }
}

Answer 1

您需要像这样创建 store：

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

autoRehydrate 需要成为您的 compose 的一部分。检查 this compose example.

Answer 2

你能试试这个吗？我想发生的是 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' 手动完成并在你的减速器中调用它。

Answer 3

react-native-router-flux 即使与 redux 一起使用也不会自行恢复场景。 Redux 仅跟踪状态，因此如果您希望导航状态持续存在，则必须让您的应用在启动时导航到上一个场景。

假设你有 redux 与 react-native-router-flux 一起工作，你需要做的就是将应用程序的初始组件连接到 redux 以获取你的状态，然后更改你的场景以匹配。

因此，在为您的应用程序加载的初始组件场景中，在最后执行类似这样的操作以访问您的 redux 存储：

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

您还可以传入导航到最后一个场景时使用的道具，或者如果 redux 商店没有持久存在的场景，则设置您想要转到的默认场景。我正在开发的应用程序现在可以很好地保持状态。

路由器状态不会在带有 redux 的 react-native 中持久化

Router state not being persisted in react-native with redux

reactjs

react-native

redux

react-redux

react-native-router-flux