Последовательный dispatch асинхронных экшенов?

Question

[alex4answ]

Добрый день, столкнулся с задачей:

В компонент нужно вывести данные из 2 разных (но связанных) частей стора.
Но перед выводом, данные нужно обновить.

Пример:
есть Дома (координаты и тп), а есть История Домов (кто когда жил и тп), структура store:
- houses
- - houses
- - histories ( WeakMap )

В итоге мне перед выводом страницы, нужно сначала запросить все Houses, а затем для всех этих домов запросить History.

Как это сделать?
Понимаю что можно объединить это в 1 действие, но не хочу (тк данные смешаются, будет трудно работать с ними)

Как в useEffect сначала задиспатчить загрузку домов, а после загрузки задиспатчить загрузку историй к этим домам?

что-то типа:

const dispatch = useDispatch();
const houses   = useSelector((state) => state.houses.houses);
const housesHistory = useSelector((state) => state.houses.histories);

useEffect(() => {
  dispatch(getHouses());
  dispatch(getHousesHistory(houses));
}, [dispatch, houses, housesHistory])

Но очевидно это не работает, тк действия отправляются друг за другом, не ждут загрузки и тп, а еще бесконечное обновление, потому что зависимости у useEffect не правильные, но не суть.

Как делать последовательные запросы redux ?

Answer 1

[Vladimir Lewandowski]

Типа такого:

// запрашиваете дома при маунте компонента.
useEffect(() => {
  dispatch(getHouses());
}, [dispatch]);

// запрашиваете историю при изменении houses.
useEffect(() => {
  dispatch(getHousesHistory(houses));
}, [dispatch, houses]);

Но лучше такую логику не в компонентах держать, а выносить во что-то вроде redux-saga.

Comments

[alex4answ]

Ну то есть лучше создавать отдельный actionCreator для подобного, верно ?

Совсем забыл что можно использовать несколько useEffect, спасибо )

[alex4answ]

Vladimir Lewandowski, почему это стоит вынести в отдельный action creator, а например не в отдельный хук?

типа useHouseWithHistory();
Пытаюсь понять как правильнее, и почему так, буду очень благодарен если объясните

[n1ksON]

alex4answ, потому что нет смысла засорять компоненту. Это усложняет чтение кода