Как получить данные в редуксе перед первым рендерингом и установить его в состояние по умолчанию

Question

У меня есть выпадающий фильтр для отображения элементов по дате, например, и отображения данных за последние 24 часа, отображения данных за последние 3 дня.

У меня есть defaultState в моем редукторе

const defaultState = {
  dataArray: [],
  a: true,
  b: false
}

По умолчанию dataArray пусто.И у меня есть редуктор и действие.В методе componentDidMount я получаю данные с сервера, отправляя некоторые действия.Если я обновлю страницу, страница по умолчанию, в которой перечислены последние элементы за 24 часа, будет пустой, потому что dataArry происходит из defaultState в моем редукторе.Но если я изменил страницу, чтобы отобразить данные за последние 3 дня, то componentWillReceiveProps работает, и внутри этого метода я выбираю данные, и это уменьшает мое состояние и возвращает новое с

dataArray = [{some data}]

Как извлечь данные и установить их в состояниеотобразить его после обновления страницы?

Answer 1

Ответ Йосси очень хорош.Я просто хочу сделать еще один шаг вперед и упомянуть, что вы также можете повысить удобство работы своих пользователей, зная , когда для извлечения данных.Например, если вы находитесь на целевой странице и знаете, что большинство ваших пользователей будут просматривать ваш магазин, начните извлекать эти данные на целевой странице, пока ничего не происходит.

Чтобы согласиться с этим,взгляните на это: request_dle Google CallIdleCallback ()

Answer 2

Добавить в defaultState переменную 'loading' и инициализировать ее как true.Когда выборка данных завершена, установите для нее значение false.

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

В дополнение к этому, каждый раз, когда вы начинаете выборку, перед выборкой запускайте действие под названием «FETCH_START», которое установитзагрузка переменной в значение true.

Если при выборке произошла ошибка, вы можете установить другую переменную состояния в сообщение об ошибке.Эта переменная будет инициализирована (каждый раз, когда вы начинаете выборку) пустой строкой.Если загрузка завершена, вы можете проверить эту переменную ошибки и отобразить сообщение об ошибке, если произошла ошибка, вместо отображения данных.

Этот процесс полезен для различных случаев, таких как аутентификация и т. Д.