Redux 与 React 导航保持一致
Redux persist with React navigation
我使用 Redux-persist 存储了 config.autologin 属性。
当我创建一个 React-navigation 堆栈时,我想检查 autoloign 值,但此时状态还没有重新水化。
我以为 PersistGate 是我需要的,但这不是真的。
你能帮助我吗?
谢谢
App.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)
AppNavigation
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 如果用户已登录,我需要在初始化它们之前检查 on/off 以显示每个状态的特定抽屉。
您可能会看到状态已在您的渲染方法中正确更新。如果你想事先获得这个状态,你需要 getDerivedStateFromProps
我相信在你的情况下它会是这样的:
static getDerivedStateFromProps(nextProps, prevState) {
if(nextProps.autoLogin !== prevState.autoLogin) {
return 'Home'
} else {
return 'DrawerStack'
}
}
所以你会得到来自你的 redux(nextProps) 的状态和你的 prevState(来自组件的状态),然后你会检查它们是否不同,然后采取相应的行动。
希望对您有所帮助。
我使用 Redux-persist 存储了 config.autologin 属性。 当我创建一个 React-navigation 堆栈时,我想检查 autoloign 值,但此时状态还没有重新水化。 我以为 PersistGate 是我需要的,但这不是真的。 你能帮助我吗? 谢谢
App.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)
AppNavigation
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 如果用户已登录,我需要在初始化它们之前检查 on/off 以显示每个状态的特定抽屉。
您可能会看到状态已在您的渲染方法中正确更新。如果你想事先获得这个状态,你需要 getDerivedStateFromProps
我相信在你的情况下它会是这样的:
static getDerivedStateFromProps(nextProps, prevState) {
if(nextProps.autoLogin !== prevState.autoLogin) {
return 'Home'
} else {
return 'DrawerStack'
}
}
所以你会得到来自你的 redux(nextProps) 的状态和你的 prevState(来自组件的状态),然后你会检查它们是否不同,然后采取相应的行动。
希望对您有所帮助。