路由器状态未在使用 redux 的 react-native 中持久化 [英] Router state not being persisted in react-native with redux

问题描述

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

I have the following redux configuration in react-native using react-native-router-flux and redux-persist. I want to retrieve the last current route on refresh, however the route stack is being overwritten on reload.

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

This is the index.js with it's Provider and scenes:

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

推荐答案

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

react-native-router-flux doesn't restore a scene by itself even when used with redux. Redux only keeps track of state, so you have to have your app navigate to the previous scene on startup if you want your navigation state to persist.

假设您有使用 react-native-router-flux 的 redux，您需要做的就是将应用的初始组件连接到 redux 以获取您的状态，然后更改您的场景以匹配.

Assuming you have redux working with react-native-router-flux, all you need to do is connect your app's initial component to redux to get your state and then change your scene to match.

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

So, in your initial component scene loaded for your app, do something like this at the end to get access to your redux store:

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

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

INITIAL_COMPONENT = connect(mapStateToProps)(INITIAL_COMPONENT)

然后在该组件的生命周期方法之一中，您可以像这样重定向:

Then in one of your lifecycle methods of that component you could redirect like so:

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

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

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

You could also pass in props that were used when navigating to the last scene or set a default scene you want to go to if the redux store doesn't have a scene that it's persisting. The app I'm working on is persisting state beautifully now.

这篇关于路由器状态未在使用 redux 的 react-native 中持久化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！