React Native: Как запустить удаленную выборку при переключении обратно на вкладку в зависимости от состояния - PullRequest
Новая
       14

React Native: Как запустить удаленную выборку при переключении обратно на вкладку в зависимости от состояния

0 голосов
/ 30 июня 2018

Я создаю приложение с 2 вкладками (react-navigation). Я новичок в react и redux и все еще пытаюсь обдумать, как взаимодействовать между компонентами, не создавая слишком много ненужных зависимостей.

Вкладка A: Основным компонентом является выборка данных через удаленный API. Для этого я использую react-redux и redux-thunk. Данные хранятся в центральном хранилище, поскольку они используются для состояний кнопок в разных компонентах (вкладка A и вкладка B). Нажатие кнопки вызывает Thunk, который обрабатывает асинхронный вызов API для обновления сервера, а затем отправляет действие для обновления хранилища.

Вкладка B: Также извлекает свои данные через удаленный API, но устанавливает их через State компонента. Я также не видел смысла помещать это в хранилище с избыточностью, так как оно не распределяется между компонентами. Здесь также используется компонент кнопки из вкладки А.

Чего я пытаюсь достичь: Когда состояние внутри хранилища редуксов изменяется (кнопка onPress() отправляет действие), и Tab A, и Tab B требуют повторной выборки через удаленный API, но только при следующих обстоятельствах:

  • Переключение с одной вкладки на другую требует повторного извлечения внутри целевой вкладки. Тогда, только при переключении обратно на первую вкладку, он также должен инициировать повторное извлечение.

Что я считал:

Добавление флагов tabAinvalidated и tabBinvalidated в хранилище резервов. Затем я слушаю событие willFocus внутри обеих вкладок. Затем я повторно получаю, если соответствующая вкладка помечена как недействительная. Это может сработать, но я не уверен, считается ли это антипаттером, чтобы хранить флаги обновления для отдельных компонентов в хранилище избыточности.

Q: Есть ли лучший подход к этому? Каков наилучший способ реагировать на нативный, чтобы сообщить компонентам, что им необходимо перезагрузить свои данные из удаленного API?

1 Ответ

0 голосов
/ 30 июня 2018

Я думаю, что сам придумал решение. Вместо того, чтобы использовать логические флаги для каждой вкладки (tabAinvalidated, tabBinvalidated), я теперь просто записываю метку времени для каждого обновления в хранилище приставок. Для компонентов, которые требуют повторной выборки на основе обновлений хранилища с избыточностью, я копирую временную метку с избыточностью в состояние их собственного компонента каждый раз, когда повторно извлекаю данные. Таким образом, я могу проверить, должен ли компонент повторно получать свои собственные данные с сервера. 

  setFocus = async() => {
    if (this.props.updateTs > this.state.updateTs) {
        await this.loadData()
        this.setState({ updateTs: this.props.updateTs, })
    }
  }

Кажется, работает нормально.

...