Изучите основные концепции Redux, а также передовой опыт и шаблоны.
Повестка дня
- Что такое Redux и зачем он нам нужен.
- Изучение основных концепций Redux путем создания его с нуля
- Создавая приложение Todo с помощью Redux, мы писали с нуля
Что такое Redux?
Redux - это шаблон архитектуры данных, который помогает нам управлять данными приложения в единой оконной системе.
Короче говоря, Redux - это набор передовых практик и шаблонов для изолированной обработки данных приложения.
Зачем нам это нужно?
Основным строительным блоком для любого внешнего приложения являются компоненты (это могут быть компоненты react / angular / web или любая реализация фреймворка). Тем не менее, мы можем разделить компоненты на Презентационные и Контейнерные компоненты.
Чтобы обеспечить работу этих компонентов, нам нужно наполнить их данными. Данные играют важную роль в любом приложении.
Теперь вопрос в том, как нам управлять данными?
Поскольку компоненты составляют друг друга, чтобы соответствовать порту просмотра - если мы будем управлять данными внутри компонента, мы можем получить дублирование данных, и общие данные приложения могут не нормализоваться и мы не можем получить полную картину состояния приложения.
Решение состоит в том, чтобы изолировать данные приложения с помощью некоторых проверенных передовых методов и технических приемов - это единственная цель структур управления состоянием.
На рынке существует множество структур государственного управления, таких как Flux, Redux, Akita, NgRx, MobX и т. Д.
Мы выбрали Redux, поскольку основные концепции инструментов управления состоянием являются общими для всех, и их письменная реализация может отличаться.
Изучение основных концепций Redux путем создания его с нуля
Действие. Действие - это простой старый объект JavaScript, который указывает, какое действие необходимо выполнить с данными приложения.
В большинстве случаев Action содержит type, который представляет уникальный тип действия, а payload содержит дополнительные данные для облегчения действия.
Редуктор. Редуктор - это чистая функция, которая содержит логику реализации для обработки всех видов инструкций действия.
Передача текущего состояния и действия функции редуктора ответит обновленным состоянием. Поскольку его чистая функция - результат будет чисто сформулирован с помощью функциональных аргументов. (то есть - состояние, действие)
Store - Store отвечает за управление данными приложения и обрабатывает отправленные действия, передавая их редуктору и синхронизируя состояние с зарегистрированными слушателями.
Выше представлена минимальная реализация магазина Redux. Store принимает в качестве параметра конструктора данные редуктора и начального приложения. У нас есть три основных метода с хранилищем. Они есть,
- dispatch - метод, который помогает компонентам-потребителю отправить действие. Как только действие отправлено, store передает текущее состояние и действие редуктору и переназначает обновленное состояние. Диспетчер также перебирает все функции обратного вызова слушателя и уведомляет их - изменение состояния произошло.
- getState - метод, отвечающий за текущее состояние.
- subscribe - метод, помогающий потребителям регистрировать обратные вызовы, чтобы получать уведомления при изменении состояния.
Вы можете задаться вопросом, почему функция
subscribeне отвечает текущему состоянию, потому что целиgetStateиsubscribeортогональны друг другу. Вы можете увидеть подробное объяснение здесь.
Мы написали подписку с шаблоном наблюдателя, если вы знакомы с расширением Reactive - хранилище Redux также можно написать с помощью RxJS API. Вы можете найти наблюдаемую реализацию магазина здесь.
Создавая приложение Todo с помощью Redux, мы писали с нуля
Прежде чем мы разработаем веб-приложение с помощью любого инструмента управления состоянием. Лучше следовать дорожной карте ниже, и это поможет упростить разработку.
- Определите структуру данных вашего приложения, невозможно объявить полный скелет. Я согласен, но по крайней мере создайте минимальную структуру, основанную на вашем плане использования с пользовательским интерфейсом.
- Определите Действия, которые изменят данные вашего приложения.
- Объявите функцию Reducer, которая будет принимать данные и действие приложения в качестве входных данных и отвечать обновленным состоянием.
- Создайте Store, передав Reducer и исходные данные приложения.
Давайте запустим приложение Todo, думая о данных приложения для управления задачами. Грубое состояние, которое пришло мне в голову, это
С этой мысленной картиной - давайте посмотрим на модель задачи и на состояние приложения.
Давайте повторим действия, необходимые для работы нашего приложения.
- Добавление задачи
- Удаление задачи
- Переключение задач как завершенных / незавершенных
Давайте определим действия ниже,
Создатели действий - это помощники для определения или создания объекта действия. Например, - AddTodoAction помогает создать действие добавления задачи, цель создателя действия - удалить объявление дубликата атрибута объекта действия.
Например - если нам нужно добавить createdAtattribute к действию todo, предположим, что создателя действия нет - тогда нам нужно объявить его объекту действия, куда бы мы ни отправили действие.
Давайте объявим логику редуктора для обработки объявленных действий.
Давайте создадим экземпляр нашего Магазина,
Окончательная реализация DOM - чтобы уместить данные из магазина в представление.
todoListElem, addButtonElem и todoInputElem - это узлы DOM, захваченные в Typescript для обработки представления.
Мы используем функцию subscribe магазина, чтобы перерисовать представление, и функцию dispatch для отправки объявленных нами действий.
Просмотрите код - все должно быть понятно.
Заключение
- Redux - это набор лучших практик и шаблонов, которые помогают нам эффективно управлять данными приложения.
- Действие, Редуктор, Магазин - это основные фундаментальные части любой структуры управления состоянием.
- Вы можете найти полный исходный код и живую демонстрацию
Если вам понравилась эта статья или у вас есть вопросы, не стесняйтесь оставлять комментарии! 🤓
