Быстрая и лаконичная конфигурация для добавления хранилища Redux в приложение React.
Работая над приложением React, мы часто сталкиваемся с необходимостью ввести в проект менеджера состояний, чтобы помочь нам управлять всеми состояниями и легко обмениваться данными в приложении.
Обычно хорошим кандидатом является Redux. Это мощный и гибкий способ управления глобальным состоянием и централизации большей части логики данных.
Redux - это контейнер с предсказуемым состоянием для приложений JavaScript.
Но при добавлении Redux в ваше приложение React вы уверены, что сделали это правильно? Здесь мы увидим, как интегрировать его в наше приложение после хорошей файловой структуры и настройки конфигурации. Начнем!
1. Каркас магазина.
Прежде чем приступить к изучению кода, давайте вместе определим, как мы хотим организовать файлы, и интегрировать его в базу кода React.
Общая идея состоит в том, чтобы создать каталог «store», который будет содержать всю нашу логику и конфигурацию хранилища, чтобы мы могли просто импортировать настройки нашего хранилища и передать их Provider в наше приложение.
- Создайте папку store в MyApp / src.
- Создайте файл index.js для экспорта нашего создателя магазина. Также добавьте две папки: промежуточное ПО и редукторы .
- В папке промежуточного программного обеспечения создайте файл для каждого промежуточного программного обеспечения Redux (например, api, logger).
- В папке редукторы создайте файл index.js, чтобы объединить все редукторы. Также добавьте папку для каждого редуктора.
- Для каждой папки редуктора создайте четыре файла:
- actions.js: содержит создателей действий для действий, связанных с этим редюсером.
- reducer.js: содержит функцию редуктора.
- selectors.js: содержит селекторы состояний.
- types.js: содержит определение типа действий.
2. Добавьте первый редуктор.
Поскольку все приложения разные и вам могут понадобиться разные состояния, для простоты я напишу хорошо известный Пример счетчика.
Отказ от ответственности: в этом примере предлагаемый шаблон является чрезмерно структурированным, но по мере роста вашего приложения важно сохранять организованность этой логики.
3. Комбинируйте редукторы.
Если ваше приложение довольно простое и вы работаете только с одной функцией редуктора, возможно, вам не потребуется их объединять, но в случае, если вы определили несколько функций редуктора, хорошо потребовать их и объединить их все вместе с помощью combineReducers , предоставляемая пакетом Redux:
Как вы могли заметить, комбинация наших редукторов - это то, что будет импортировано, если нам потребуется папка redurs.
4. Промежуточное ПО или не промежуточное ПО?
Основное внимание в этом упражнении уделяется не реализации промежуточного программного обеспечения, поэтому я предполагаю, что вы знаете, как они работают и какова их роль в магазине, но я обещаю, что я также создам руководство по их реализации 🚀
5. Наконец, конфигурация магазина.
Теперь, когда у нас есть редюсеры и промежуточное ПО, пришло время создать нашего создателя хранилища redux - функцию, которая позволяет нам создать новое хранилище с некоторыми необязательными параметрами:
Чтобы вспомнить, что происходит в этом файле:
- Мы создаем список обязательного промежуточного программного обеспечения.
- В режиме разработки мы применяем дополнительную конфигурацию, например, промежуточное ПО для ведения журнала.
- Мы определяем (и экспортируем!) Функцию
configureStore, которая создает новое хранилище и на основе параметров, полученных в качестве аргумента, устанавливает начальное состояние и, при необходимости, кэширует это состояние.
Резюме
Что ж, дорогие читатели, теперь вы можете импортировать из папки вашего магазина функцию, которая может легко создать ваш магазин, а в случае, если вам нужно расширить свое состояние с помощью новой логики, у вас есть пошаговая инструкция, которую легко отслеживать и над которой можно работать!
Комментарии, публикации и обсуждение темы всегда приветствуются, и я буду рад ответить на любые ваши вопросы!
Не стесняйтесь связаться со мной в Linkedin: https://www.linkedin.com/in/marcoantonioghiani/
Здесь вы можете найти некоторые из моих статей:
