React JS — использование Flux

React JS — использование Flux

От автора: в этой главе мы познакомимся с тем, как реализовать в приложениях шаблон Flux React. Мы будем использовать среду Redux. Цель этой главы — представить простейший пример каждой части, необходимой для подключения Redux и React.

Шаг 1 — Установите Redux

Мы установим Redux через окно командной строки.

Шаг 2. Создание файлов и папок

На этом этапе мы создадим папки и файлы для действий, редукторов и компонентов. После того, как мы закончим, структура папок будет выглядеть так.

Шаг 3 — Действия

Действия — это объекты JavaScript, которые используют свойство type для информирования о данных, которые должны быть отправлены в хранилище. Мы определяем действие ADD_TODO, которое будет использоваться для добавления нового элемента в список. Функция addTodo — это создатель действия, который возвращает наше действие и устанавливает идентификатор для каждого созданного элемента.

actions/actions.js

Шаг 4 — Редукторы

В то время, как действия только инициируют изменения в приложении, редукторы определяют эти изменения. Мы используем оператор switch для поиска действия ADD_TODO. Редуктор — это функция, которая принимает два параметра (состояние и действие) для расчета и возврата обновленного состояния.

Первая функция будет использоваться для создания нового элемента, а вторая — для ввода этого элемента в список. В конце мы используем вспомогательную функцию combReducers, в которой мы можем добавлять любые новые редукторы, которые мы могли бы использовать в будущем.

reducers/reducers.js

Шаг 5 — Хранилище

Хранилище — это место, в котором размещается состояние приложения. Если у вас есть редукторы, вы можете очень легко создать хранилище. Мы передаем свойство хранилища элементу провайдера, который обертывает компонент маршрута.

main.js

Шаг 6 — Корневой компонент

Компонент App является корневым компонентом приложения. Только корневой компонент должен знать о redux. Важно отметить, что для подключения нашего корневого компонента App к хранилищу используется функция connect.

Эта функция принимает функцию select в качестве аргумента. Функция select принимает состояние из хранилища и возвращает свойства (visibleTodos), которые мы можем использовать в компонентах.

App.js

Шаг 7 — Другие компоненты

Эти компоненты не должны знать о redux.

components/AddTodo.js

components/Todo.js

components/TodoList.js

Когда мы запустим приложение, мы сможем добавлять элементы в список.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Angular 4 с Нуля до Профи

Angular 4 - полное руководство для современной веб-разработки

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree