Redux вводит в приложение несколько новых компонентов для облегчения управления этим состоянием.
- Действия — действия используются для отправки данных из приложения в магазин Redux. Типичное действие состоит из свойства типа и необязательного свойства полезной нагрузки.
- Редукторы — это функция, которая принимает текущее состояние и действие в качестве аргументов и возвращает обновленное состояние в соответствии с действием.
- Хранилище — это сердце Redux, где хранится состояние. Состояние хранится в простых объектах и массивах JavaScript.
Создание простого Redux-приложения
В этом разделе мы создадим простое приложение, используя React и Redux.
Шаг 1. Создайте образец приложения React
Установите пакет create-react-app, создайте приложение с именем «redux-to-do» и установите Redux.
npm install -g create-react-app
create-react-app redux-contact-app
npm install --save redux react-redux
Шаг 2. Создайте папки для Redux
Создайте следующие действия, редукторы и сохраните папки в папке src, чтобы упростить функции Redux, а затем заполните их следующими файлами javascript:
Шаг 3. Создайте действия
Во-первых, в нашем actionTypes.js. Мы будем экспортировать actionType для каждого создаваемого нами объекта действия:
export const CREATE_NEW_TODO = 'CREATE_NEW_TODO';
export const REMOVE_TODO = 'REMOVE_TODO';
Шаг 4.Создайте файл toDoActions.js.
Это будет содержать все действия приложения, которые в нашем случае являются действиями создания и удаления.
Шаг 5. Создайте редукторы
Создайте файл toDoReducer.js, чтобы связать действия с состоянием, хранящимся в хранилище Redux:
Кроме того, создайте файл index.js в папке редукторов, чтобы объединить редукторы.
Шаг 6. Создайте магазин
Создайте файл с именем configureStore.js, чтобы инициализировать хранилище и подключиться к редукторам.
Шаг 7. Обновите файл index.js в корне приложения
Мы импортируем провайдера react-reduce, сохраняем и обертываем компонент в хранилище Redux.
Шаг 8. Обновите файл App.js
На этом этапе мы визуализируем приложение с указанными компонентами и подключимся к Redux, чтобы получить состояние каждого компонента.
Примечание. Классы CSS являются производными от CSS-фреймворка Bootstrap. Поэтому вам придется связать таблицу стилей Bootstrap с приложением. Это можно сделать, добавив URL CSS-файла Bootstrap в раздел head файла index.html в вашей общей папке.
Шаг 8. Запустите приложение
Используйте команду npm run для сборки и запуска приложения. Это запустит приложение в вашем браузере по умолчанию. Добавьте несколько задач и попробуйте.
Вот и все, вы успешно создали приложение для управления состоянием через Redux!
Если ваша локальная машина замедляет вашу разработку, попробуйте Codesphere. Codesphere — это интуитивно понятная веб-среда разработки и облачный провайдер, который позволяет вам кодировать, отлаживать и развертывать все с помощью облака!
Удачного кодирования!