我redux在react-native使用react-native-router-flux和中具有以下配置redux- persist。我想在刷新时检索最新的当前路由,但是路由堆栈在重新加载时被覆盖。
redux
react-native
react-native-router-flux
redux- persist
这是reducers/index.js档案
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与它的提供者和场景:
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> ) } }
react-native-router- flux即使与redux一起使用,也无法单独还原场景。Redux只跟踪状态,因此,如果要保持导航状态,则必须在启动时将应用导航到上一个场景。
react-native-router- flux
假设您正在使用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存储没有持久存在的场景时设置要转到的默认场景。我正在开发的应用现在可以完美地保持状态。