Redux сохраняется с помощью навигации React

У меня есть свойства store config.autologin с Redux-persist. Когда я создаю стек React-навигации, я хотел бы проверить значение автоопределения, но на данный момент состояние еще не регидратировано. Я предполагал, что 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

react-native redux react-navigation redux-persist
person zp26    schedule 30.01.2019    source источник

Ответы (1)


arrow_upward
3
arrow_downward

У меня похожая ситуация в моем приложении. У меня есть два ящика: LoggedDrawer и UnloggedDrawer, и перед их инициализацией мне нужно проверить, вошел ли пользователь в систему или нет, чтобы показать конкретный ящик для каждого состояния.

Вероятно, вы видите, что состояние правильно обновляется в вашем методе рендеринга. Если вы хотите получить этот статус заранее, вам понадобится getDerivedStateFromProps.

Я считаю, что в вашем случае это будет примерно так:

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

Таким образом, у вас будет состояние из вашего redux (nextProps) и вашего prevState (состояние из компонента), тогда вы проверите, разные ли они, и затем действуете соответственно.

Надеюсь, это поможет.

person kivul    schedule 30.01.2019