react-native - Redux 坚持使用 React 导航
问题描述
我使用 Redux-persist 存储 config.autologin 属性。当我创建一个 React-navigation 堆栈时,我想检查自动登录值,但此时状态尚未重新水化。我认为 PersistGate 是我需要的,但这不是真的。你能帮助我吗?谢谢
应用程序.js
export default class App extends React.Component {
render() {
return (
<Provider store={reduxStore}>
<PersistGate loading={null} persistor = {persistor}>
<AppContainer
ref={navigatorRef => {
NavigationService.setTopLevelNavigator(navigatorRef);
}}
/>
</PersistGate>
</Provider>
);
}
}
reduxStore
const persistState = {
key: 'root',
storage,
whitelist: ['config']
}
const persistedReducer = persistReducer(persistState, reducers)
export const reduxStore = createStore(persistedReducer, devToolsEnhancer({ realtime: true }))
export const persistor = persistStore(reduxStore)
应用导航
selectInitialRoute = () =>{
if(reduxStore.getState().config.autoLogin)
return 'DrawerStack'
else
return 'Home'
}
const defaultNavigation = createStackNavigator({
Home: loginNavigation,
DrawerStack: defaultDrawerNavigation
}, {
initialRouteName: this.selectInitialRoute(),
defaultNavigationOptions: {
header: null
},
}
)
const AppContainer = createAppContainer(defaultNavigation);
export default AppContainer
解决方案
我的应用程序中有类似的情况。我有两个抽屉:LoggedDrawer 和 UnloggedDrawer,我需要在初始化它们之前检查用户是否登录/关闭以显示每个状态的特定抽屉。
您可能会看到在您的渲染方法中正确更新了状态。如果您想事先获得此状态,则需要getDerivedStateFromProps
我相信在你的情况下它会是这样的:
static getDerivedStateFromProps(nextProps, prevState) {
if(nextProps.autoLogin !== prevState.autoLogin) {
return 'Home'
} else {
return 'DrawerStack'
}
}
因此,您将获得来自 redux(nextProps) 和 prevState(来自组件的状态)的状态,然后您将检查它们是否不同,然后采取相应的行动。
希望能帮助到你。
推荐阅读
- javascript - 我无法弄清楚这段代码的实际含义
- c# - Core 2.1 APIVersioning 动作歧义
- perl - 如何通过匹配字符 {say X} 的任何字母/数字来检查哈希中是否存在哈希键
- sql - DB2 多表连接产生重复行
- vb.net - 如何将datagridview中的第二个选定行传递给文本框?
- vue.js - 客户端组件中使用的 Vuejs 道具
- elasticsearch - Searchkick:我希望结果先显示完全匹配,然后再通过排序列出其他结果?
- antlr - 格式错误的插值被视为正常字符串的字符串插值语法
- php - 如何在不刷新的情况下显示金额?
- node.js - 无法使用 mongoose 更新 Mlab 文档的值,它被保存为“__v”:0