React Native: как запустить удаленную выборку при переключении обратно на вкладку в зависимости от состояния
Я создаю приложение с двумя вкладками (react-navigation). Я новичок в react и redux, и я все еще пытаюсь понять, как взаимодействовать между компонентами, не создавая слишком много ненужных зависимостей.
Вкладка A: Основной компонент - получение данных через удаленный API. Для этого я использую react-redux и redux-thunk. Данные хранятся в центральном хранилище, поскольку они используются для состояний кнопок в различных компонентах (вкладка A и вкладка B). Нажатие кнопки вызывает Thunk, который обрабатывает вызов асинхронного API для обновления сервера, а затем отправляет действие для обновления хранилища.
Вкладка B: Также извлекает свои данные через удаленный API, но устанавливает их через State компонента. Я не видел смысла также помещать это в хранилище redux, поскольку оно не разделяется между компонентами. Здесь также используется компонент кнопки из вкладки A.
Чего я пытаюсь достичь: Когда состояние внутри хранилища redux изменяется (кнопка onPress() отправляет действие), и вкладка A, и вкладка B требуют повторной выборки через удаленный API, но только при следующих обстоятельствах:
- Для переключения с одной вкладки на другую требуется повторная выборка внутри целевой вкладки. Затем, только при переключении обратно на первую вкладку, он также должен запускать повторную выборку.
Что я считал:
Добавление флагов tabAinvalidated и tabBinvalidated в хранилище redux. Затем я слушаю событие willFocus на обеих вкладках. Затем я выполняю повторную выборку, если соответствующая вкладка помечена как недействительная. Это может сработать, но я не уверен, что сохранение флагов обновления для отдельных компонентов внутри хранилища redux считается анти-паттерном.
Вопрос: Есть лучший подход к этому? Как лучше всего реагировать на собственный код, чтобы сообщить компонентам, что им необходимо перезагрузить данные из удаленного API?
Ответы 1
Думаю, я сам придумал решение. Вместо использования логических флагов для каждой вкладки (tabAinvalidated, tabBinvalidated) я сейчас просто записываю метку времени для каждого обновления в хранилище redux. Для компонентов, которые требуют повторной выборки на основе обновлений хранилища redux, я копирую временную метку redux в состояние их собственного компонента каждый раз, когда я повторно извлекаю данные. Таким образом я могу проверить, нужно ли компоненту повторно получать собственные данные с сервера.
setFocus = async() => {
if (this.props.updateTs > this.state.updateTs) {
await this.loadData()
this.setState({ updateTs: this.props.updateTs, })
}
}
Вроде нормально работает.