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 — это интуитивно понятная веб-среда разработки и облачный провайдер, который позволяет вам кодировать, отлаживать и развертывать все с помощью облака!

Удачного кодирования!