Как правильно взаимодействовать react+redux+rest api?

Question

[stasov1]

Всем привет. Есть сайт на котором бэк реализован в виде api и фронт на react+redux. Как будет более правильно организовать взаимодействие react с redux: получить данные с бэка, и передать их через redux в нужный react компонент в том виде в котором они пришли, записать все в стейт и уже там в компоненте делать фильтрацию и все остальное взаимодействие пользователя с сайтом по средствам изменения стейта компонента? Или получить данные, отфильтровать их в редьюсере и в компонент прокинуть как props только нужные данные, и взаимодействие с пользователем оформить через redux по средствам диспатча действий???

Спасибо.

Answer 1

[Nash]

Придерживайтесь правила, что компоненты не знают ничего о том, что происходит с данными до того момента, когда они попали в компонент в том формате, в котором они ему нужны.

У нас работает так
1. Вызываем action и получаем данные с rest api в нем же (promise в помощь)
2. передаем данные в reducer
3. получаем данные в контейнер, который отвечает за бизнес логику, в нем же у нас redux connect, обрабатываем данные до формата, который требуется компоненту, тут же mapDispatchToProps со всеми функциями для вызова actions внутри компонента, mapStateToProps - дефолтный state для компонента, как правило содержит isLoading, isError, если action еще не отработал или отработал не верно. Здесь же мы пишем обработчики для мутирования данных
4. Передаем данные в компонент и отображаем их. Больше ничего компонент делать не должен. Вся бизнес логика в контейнере, компонент только отображает/вызывает функции контейнера для мутации данных и вызова actions.

Если вы погружены в react/redux, то вы поймете о чем речь, если нет, вам будет трудно понять о чем я выше написал.

Answer 2

[Anton Bobylev]

Подробное описание подходов описано в статье Connecting Redux to your API.

tl;dr

Summary
To summarize the choices and general trends I’ve found:

• You may or may not want to store your data in Redux, but if you do, you probably want your request metadata in there too
  
• For simple apps, imperative fetching might be fine for a while, but declarative approaches are very powerful as you need to sequence asynchronous events
  
• You may or may not want to structure your data in normalized form, but there are tools for you to do so if you choose to
  
• There appears to be room for more exploration on the topic of how to structure metadata in your store

In other words, the ways that folks are using Redux to fetch and/or store data from the backend are numerous and we’re spoiled for (or burdened by?) choice at the moment.