Реагировать на Redux и Fetch

Question

У меня есть приложение React с Redux, имеющее следующую структуру:

<ComponentParent>
<ComponentA></ComponentA>
<ComponentB></ComponentB>
</ComponentParent>

В компоненте A ComponentDidMount вызывается выборка, и данные возвращаются асинхронно. Затем вызывается Reducer для добавления данных в хранилище. Компонент B затем обращается к хранилищу для доступа к данным, добавленным A в хранилище.

Предсказуемо Компонент B обращается к данным до того, как Компонент A изменил их для записи данных в хранилище (потому что данные поступают из aync fetch).

Вопрос:

1. Как правильно разработать такое взаимодействие?
2. Нужно ли использовать подход, аналогичный реагировать на редукцию с асинхронной выборкой ? Обратите внимание, что в Reducer я просто храню данные, возвращаемые асинхронно Компонентом A, в отличие от ссылки

Спасибо

Answer 1

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

В вашем действии выборки, предполагая, что вы используете redux-thunk:

let fetchData = () => async dispatch => {
 let res = await fetchFromDataSource();
 dispatch({
  type: UPDATE_STATE,
  payload: res
 }) 
};

Ваш компонентB должен быть связан с магазином. При обновлении отправки он должен инициировать перезагрузку вашего componentB через ComponentDidUpdate.