Abr_ya
@Abr_ya

React + Redax + Sagas — как правильно строить приложение?

Разговаривал с опытным разработчиком по поводу использования саг. Если я правильно понял его, то получается следующее разделение кода в приложении:
- компоненты - в основном - визуальная часть, из логики - только небольшое что-то, может быть локальный стейт для чего-то, что нужно только внутри компонента,
- контейнер компонента - используется для коннекта и передачи в props компонента части стейта и экшенов, может быть один на всё приложение - тогда в остальные компоненты свойства "спускаются", но может также использоваться для отдельного компонента, если "спускать" свойства от корневого компонента неудобно,
- экшены - чистые функции, которые передаются в компонент и используются для вызова редюсера или саги,
- сага - основное место бизнес-логики приложения (здесь она практически вся!) + вызовы экшенов,
- редюсеры - чистые функции, которые используются для изменения стейта ридакс.

Правильно ли я описал основные моменты?
Если да, единственный ли это вариант, или, в принципе, подходы могут быть разными?
Недавно по инструкции из Интернета писал приложение, там не было саг, и большую часть логики я отправил в экшены, в т.ч. асинхронную - с помощью thunk. Насколько это хорошая практика?
Может посоветуете что-то почитать именно по принципам построения относительно больших приложений в данной связке инструментов (React + Redax + Sagas)?
  • Вопрос задан
  • 298 просмотров
Решения вопроса 1
GreyCrew
@GreyCrew
Full-stack developer
Хороший вопрос, но что касается модели данных, то некоторые паттерны в этом плане за нас уже придумали и они довольно не плохие. к примеру redux-ducks, их можно разбивать, как в примере выше, а можно и группировывать в одном файле. Собственно саги они в самом конце располагаться должны, вот мой пример организации компонента с сагами

Про часть представления данных, я сам постоянно пытаюсь разделять компоненты и контейнеры. Но тут главное не перемудрить, когда из одного родительского контейнера прокидываются данные через 50 потомков в компонент. Уж лучше тогда где то ниже законнектится к стору и получить нужный параметр.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
@Dasslier
FrontEnd Developer
Для начала - документация, в ней есть и самый просто пример использования саг и редакса. А еще на udemy есть курс по саге - англоязычный и курс по react + redux от Юрия Бура. Покопаетесь в доках пару дней и пройдете курсы - разберетесь
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы