Если вы работаете с парой проектов с похожей структурой данных, вы будете использовать похожие редукторы. Поэтому может быть полезно писать редукторы в виде модулей, которые упрощают их повторное использование. Кроме того, вы сможете отлаживать и обновлять reducer, перейдя в один каталог, вместо того, чтобы искать в своем проекте файл, который вам нужно изменить.
В этом примере мы создадим приложение, которое подключается к GitHub API и получает репозитории от любого пользователя.
Структурирование редукторов
Каждый редуктор со всеми его действиями, типами действий и логикой будет определен в одном каталоге. Это позволит нам повторно использовать reducer в любом проекте, не беспокоясь о путях к файлам, отсутствующих действиях или константах.
Вы должны быть знакомы со всеми упомянутыми файлами, кроме оркестратора. Итак, теперь мы увидим, что они из себя представляют.
Промежуточное ПО Redux для обработки побочных эффектов
Orchestrator будет использоваться в качестве промежуточного программного обеспечения вместо таких библиотек, как Thunks, Sagas и Observables, поскольку его проще реализовать и поддерживать, когда вашему проекту не требуется больше, чем вызов API.
Он будет прослушивать какое-то действие и запускать некоторую асинхронную функцию для выбранного типа действия.
Это функция карри, которая возвращает 3 функции.
- Первая функция получает ссылку на магазин.
- Вторая функция получает ссылку на функцию, которая отправляет следующее действие.
- Третья функция получает текущее действие, которое будет использоваться для запуска вызова API.
Добавление редукторов в магазин
Для инициализации магазина воспользуемся парочкой файлов:
- Начальное состояние:
Начальное состояние состоит из объектов initState, определенных в редукторах repos и selectedRepo:
2. Промежуточное ПО:
Мы импортируем все оркестраторы и объединим их в одно промежуточное ПО.
3. Редукторы
Перед созданием магазина нам нужно объединить все редукторы. Мы не будем использовать commonReducers из пакета Redux, а будем определять их вручную.
Вот импортированный нами редуктор репозиториев:
4. Создание магазина
Наконец, чтобы создать магазин, мы импортируем все упомянутые выше части и передадим их в функцию createStore:
Контейнеры и интерфейс
Создав хранилище, мы можем писать контейнеры для нашего приложения. Каждый контейнер будет написан как компонент без состояния. Вместо передачи функции dispatch мы будем использовать mapDispatchToProps. Это позволит нам иметь более читаемые компоненты и единое место со всеми функциями диспетчеризации для этого компонента.
Вы можете увидеть весь проект на GitHub.
