Как работать с состоянием при переходе с экрана, используя реагировать родную и реагировать навигацию

Question

Я получаю неопределенное исключение для объекта при переходе с одного экрана на другой. У меня есть довольно хорошее представление о том, что происходит, я просто не уверен, есть ли чистый способ справиться с этим, не просто проверяя наличие неопределенного везде.

Вот мой сценарий:

1. Исходный экран ссылается на объект пользователя в хранилище Redux
2. Начинается навигация с экрана источника на экран назначения.
3. Вызывается экран назначения componentDidMount (), где я очищаю объект пользователя из хранилища Redux.
4. Исходный экран render () вызывается снова, и возникает неопределенная ошибка, потому что я удалил пользователя из хранилища.

Я предполагаю, что экраны источника и назначения имеют некоторое перекрытие из-за перехода. Я попытался добавить слушателей без удачи. Я могу только заставить обработчики слушателя срабатывать для type = action,

Я, вероятно, делаю это более сложным, чем оно есть, но я хотел бы выяснить, существует ли стандартный способ борьбы с этим или я поступаю совершенно неправильно.

Кроме того, моя реагирующая навигация интегрирована с Redux согласно инструкциям на веб-сайте React Navigation и образцу кода Redux React Navigation.

Вот основной код.

Экран 1

componentDidMount() {
  // This is a Redux action that sets an object called user to null
  clearUser();
{

Экран 2

render() {
  return (
    // Other code here
    // user is null here because render gets called after Screen1#componentDidMount() gets called
    <Text>{user.firstName + ' ' + user.lastName}</Text>
    <TouchableOpacity
      onPress={() => navigation.dispatch({ type:'NAV_SCREEN_1' })}
    >
      // button code here
    </TouchableOpacity>
    // Other code here
  )
}

Тип ошибки: «TypeError: Невозможно прочитать свойство 'firstName' из null"

Я понимаю ошибку и почему я ее получаю. Пользовательский объект был установлен в null с помощью моего действия Redux в componentDidMount () экрана 1, а затем Redux вызывает вызов метода render экрана 2, который ссылается на объект пользователя, который является нулевым.

У меня вопрос: есть ли особый способ приспособиться к такому поведению без необходимости проверять, является ли пользовательский объект нулевым в каждом месте, где мне нужно его использовать? Должен ли я вызывать clearUser () где-нибудь еще?

Answer 1

В качестве альтернативы вы можете просто сделать свой экран с подключенным Redux дескриптором неопределенным или нулевым состоянием. У меня была похожая проблема, и я закончил рендерить загрузчик вместо содержимого экрана, когда пользовательское состояние не определено. Когда я выхожу из системы, на экране отображается загрузчик в течение доли секунды, а затем приложение отключается.

Answer 2

Для самой новой версии react-navigation вы можете использовать addListener , withNavigationFocus или isFocused для определения переходного состояния экранов.

Другой неофициальный способ - перехватить тип действия NavigationActions.COMPLETE_TRANSITION, в случае использования промежуточного программного обеспечения, например redux-saga.