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

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

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

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

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

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

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

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

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

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

actions/actions.js

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

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

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

reducers/reducers.js

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

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

main.js

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

Шаг 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.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS с полного нуля

Получить

Метки:

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

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

Комментарии 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