Redux 坚持使用 React 导航答案

【问题标题】：Redux persist with React navigationRedux 坚持使用 React 导航
【发布时间】：2025-11-24 21:15:01
【问题描述】：

我使用 Redux-persist 存储 config.autologin 属性。当我创建一个 React-navigation 堆栈时，我想检查自动登录值，但此时状态尚未重新水化。我认为 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)

应用导航

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

【问题讨论】：

标签： react-native redux react-navigation redux-persist

【解决方案1】：

我的应用也有类似的情况。我有两个抽屉：LoggedDrawer 和 UnloggedDrawer，我需要在初始化它们之前检查用户是否登录/关闭以显示每个状态的特定抽屉。

您可能会在您的渲染方法中看到状态已正确更新。如果您想提前获得此状态，则需要 getDerivedStateFromProps

我相信你的情况会是这样的：

static getDerivedStateFromProps(nextProps, prevState) {
  if(nextProps.autoLogin !== prevState.autoLogin) {
    return 'Home'
  } else {
    return 'DrawerStack'
  }
}

因此，您将获得来自 redux(nextProps) 和 prevState（来自组件的状态）的状态，然后您将检查它们是否不同，然后采取相应措施。

希望对你有帮助。

【讨论】：