Redux сохранится с навигацией React - PullRequest
Новая
       44

Redux сохранится с навигацией React

0 голосов
/ 30 января 2019

У меня есть свойства 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

1 Ответ

0 голосов
/ 30 января 2019

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

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

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

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

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

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

...