Поняв простой исходный код Redux, освойте принцип потока данных Redux.

Сначала предложите ментальную карту из этой статьи:

1. Зачем говорить о Redux

При использовании Redux в проекте я иногда чувствуюЭто работает, но я не знаю, почему. В результате при отладке невозможно быстро отладить причину. И РедуксИсходный код не сложный, раскрывая только5 API, который можно использовать как хорошийНачало чтения исходного кода, поэтому я очень рад вместе со всеми изучить Redux. Если есть какие-то неточности, можете их указать, особенно надеюсь, что у вас будет активное обсуждение и появятся новые идеи.

2. Почему появляется Redux?

Чтобы понять Redux, начните с Flux. Redux можно рассматривать как реализацию идеи Flux. Так почему же был предложен Redux? Пришло время упомянуть MVC.

1, MVC.

Говоря о Flux, мы должны упомянуть структуру MVC.

Фреймворк MVC делит приложение на 3 части:

• Вид: Просмотр, отображение пользовательского интерфейса
• Контроллер: управляет поведением и данными приложения, реагируя на ввод данных пользователем (часто из представления) и инструкции по обновлению состояния (часто из модели).
• Модель: управление данными, большая часть бизнес-логики также находится в Модели.

Запрос пользователя сначала поступает в Контроллер, затем Контроллер вызывает Модель для получения данных, а затем передает данные в Представление. Эта идея идеальна. В реальных фреймворковых приложениях большинство из них позволяют View и Model взаимодействовать напрямую. Когда проект становится все больше и больше, зависимости между разными модулями становятся «непредсказуемыми», поэтому это становится следующим.

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

Так появился Flux. Перед написанием этой статьи я просмотрел много источников, некоторые говорили, что идея Flux заменила MVC framework, я так не думаю. Лично идея Flux более строго контролирует поток данных MVC. Давайте посмотрим, как Flux строго контролирует поток данных.

2. Флюс

Приложение Flux состоит из четырех частей:

• Диспетчер, управляет распределением действий, поддерживает зависимости между магазинами
• Магазин, отвечающий за хранение данных и логику обработки данных.
• Действие, запуск диспетчера
• View, представление, отвечающее за отображение пользовательского интерфейса

Как видно из приведенного выше рисунка, характеристики FluxОднонаправленный поток данных:

• Пользователь инициирует объект Action для Dispatcher на уровне View.
• Диспетчер получает действие и запрашивает у магазина соответствующее обновление.
• Магазин делает соответствующее обновление, а затем генерирует событие изменения.
• После того, как представление получит событие изменения, обновите страницу

Так что под системой Flux, если вы хотите гонять интерфейс, вы можете раздавать только Store, другого пути нет. Согласно этому правилу, если вы хотите проследить логику приложения, это становится очень просто. И такое мышление решает проблему, заключающуюся в том, что в MVC нельзя исключить прямой диалог между представлением и моделью.

Я не буду подробно рассказывать здесь о примере Flux, если вы хотите узнать больше о Flux, вы можете посмотретьВводное руководство по архитектуре Flux от Ruan Yifeng.

4. Рождение Redux

Redux — это реализация Flux, что означает, что в дополнение к «одностороннему потоку данных» Redux также подчеркивает три основных принципа:

• Единственный магазин (Единый источник правды)
• Состояние доступно только для чтения
• Изменения вносятся с помощью чистых функций

А. единственный магазин

Во Flux приложение может иметь несколько хранилищ, но разделение на несколько хранилищ легко приводит к избыточности данных, проблемам согласованности данных, и между хранилищами могут быть зависимости, что увеличивает сложность приложения. Итак, Redux предлагает решение этой проблемы: для всего приложения существует только один Store.

б. Сохранить состояние только для чтения

То есть состояние не может быть изменено напрямую. Если вы хотите изменить состояние, вы можете сделать это, только отправив объект Action.

C. Данные могут быть получены только путем изменения чистой функции

Упомянутая здесь чистая функция — это Reducer. По словам автора редукса Дэна:Redux = Reducer + Flux.

3. Применение Redux в React

Давайте рассмотрим применение Reudx в React на примере.

1. Поток данных в Redux

Для создания приложения Redux требуются следующие части:

• Actions
• Reducers
• Store

Что они означают соответственно? Возьмем пример: Например, вот витрина с обувью определенной марки в торговом центре:

Менеджер магазина пришел проверить и обнаружил鞋子2Она слишком высока, а эта туфля до сих пор является главным толчком в магазине. Она не годится для рекламы в таком положении, так что пусть продавщица ставит.鞋子 2 往下挪两排, После того, как он положил его, директор магазина выглядел намного спокойнее.

Фактически, в приведенном выше примере у нас теперь есть хорошее объяснение Redux:

• Вид:Общий эффект обуви, размещенной на обувной стойке
• Action:Задача, поставленная менеджером клерку (опустить обувь)
• Редукторы:Исполнитель конкретной задачи (опустить обувь на два ряда вниз)
• Магазин:Конкретное положение обуви на обувной стойке

Итак, весь процесс может быть следующим:

StoreРешенныйView, то взаимодействие с пользователем производитAction,ReducerСогласно полученномуActionвыполнять задания, изменяя тем самымStoreсерединаstate, наконец, показываяViewначальство. Так,ReducerКак получить действие (Action) сигнал? Наряду с этим вопросом, давайте рассмотрим пример.

2. Редукционная практика

Поняв значение каждой части в Redux, давайте подробнее рассмотрим принцип работы Redux на примере счетчика (конкретный код см.GitHub). Конечный эффект, который нам нужен, выглядит следующим образом:

В соответствии с приведенными выше идеями Action и Reducer можно определить как:

• Действие: добавить
• Редуктор: добавить 1

Итак, давайте создадим два файла, Action и Reducer:

Actions

Сначала мы создаемActionTypes.jsа такжеActions.jsэти два файла. ActionType представляет собой тип действия, вы можете видеть, что это константа. существуетActions.js, мы определяем два конструктора Action, оба из которых возвращают простой объект (plain object), и каждый объект должен содержать свойство типа.

Видно, что Действие явно выражает то, что мы хотим сделать (сложить и вычесть).

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

Reducer

Вы можете видеть, что Reducer — это чистая функция. Он получает два параметра: состояние и действие, оценивает, какие операции необходимо выполнить для текущего состояния в соответствии с полученным состоянием и действием, и возвращает новое состояние.

В редьюсере мы присвоили состоянию значение по умолчанию, которое является нашим начальным состоянием. Читайте дальше, как Redux возвращает начальное значение.

У Action и Reducer есть и то, и другое, так как же их связать? Давайте взглянем на лучшие части Redux —Store.

createStore

Сначала мы создаем Магазин:

существуетstore.js, мы передаем редуктор вcreateStoreметод и выполните его, чтобы создать Store. Этот подход является сущностью Redux.

Посмотрите нижеcreateStoreЧасть исходного кода:

createStore принимает три параметра:

• reducer{Function}
• state{any}(необязательный параметр)
• enhancer{Function}(необязательный параметр)

Возвращает объект, содержащий пять методов. Сейчас мы сосредоточимся только на первых трех методах:

• dispatch
• subscribe
• getState

На протяженииcreateStore, только выполненоdispatch({ type: ActionTypes.INIT })этот код. Что делает рассылка?

Я пропустил часть кода, это основной код метода отправки. Он берет объект действия и помещаетcreateStoreПолученный параметр состояния и параметр Action, переданные через метод диспетчеризации, передаются редьюсеру и выполняются, а затем состояние, возвращаемое редюсером, присваиваетсяcurrentState. Наконец, выполните метод в очереди подписки.

Метод createStore выполняется, как только появляетсяdispatch({ type: ActionTypes.INIT }). Теперь мы знаем значение этого предложения, его основная цель — инициализировать состояние.

Теперь мы связали Action и Reducer. Видно, что вcreateStoreметод, он поддерживает переменнуюcurrentState, обновляется методом отправкиcurrentStateПеременная. внешний, если вы хотите получитьcurrentState, просто вызовите createStoregetStateМетод может быть:

Метод getState должен получить текущийcurrentStateпеременная, если хотитеПолучить в режиме реального временисостояние, то вам нужно зарегистрировать и отслеживать событие, и каждый раз, когда вы отправляете событие, оно будет выполняться снова.

Теперь давайте разберем наши идеи:

• Action: Цель этого действия
• Reducer: выполнение определенных операций в соответствии с полученной командой действия.
• Store: передать действие редюсеру и обновить состояние. Затем выполните метод в очереди подписки.

Redux и React — это два отдельных продукта, но если они используются вместе, вы должны упомянутьreact-reduxЭта библиотека может сильно упростить написание кода, но не будем сначала рассказывать об этой библиотеке, давайте реализуем ее сами.

2, сочетание магазина и контекста

Мы все знаем, что в React мы все используем props для передачи данных. Все приложение React представляет собой дерево компонентов, передающих данные слой за слоем.

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

К счастью, реагироватьcontextФункция может решить эту проблему очень хорошо.

Так называемый контекст — это «контекстная среда», которая позволяет всем компонентам древовидного компонента обращаться к общему объекту.Для выполнения этой задачи требуется сотрудничество верхних и нижних компонентов.

Во-первых, родительский компонент объявляет, что он поддерживает контекст, и предоставляет функцию для возврата объекта, представляющего контекст.

Затем, пока дочерний компонент объявляет, что ему нужен этот контекст, он может пройтиthis.contextдля доступа к этому общему объекту.

Таким образом, мы можем использовать контекст React, чтобы повесить на него Store, и мы можем поделиться Store глобально.

Теперь, когда вы знаете, как поделиться Store в React, давайте реализуем это~

Provider

Provider, который, как следует из названия, является поставщиком, в данном случае поставщиком контекста.

Используйте это так:

Providerобеспечивает функциюgetChildContext, эта функция возвращает объект, представляющий контекст. Его можно получить из контекста при вызове Store:this.context.store.

ProviderДля того, чтобы объявить себя поставщиком контекста, вам также необходимо указатьProviderизchildContextTypesсвойства (требует иgetChildContextк нему).

Имейте только две вышеуказанные характеристики,ProviderМожно получить доступ к контексту.

хорошо,ProviderМы завершили компоненты, и теперь мы можем подключить контекст к компонентам верхнего уровня всего приложения.

ВойтиВходной файл index.js всего приложения:

Мы передали Store в качестве реквизита дляProviderкомпонента, компонент Provider привязывает Store к контексту. Итак, давайте получим Store из контекста.

потребитель

Ниже представлена ​​вся нашаприлавокКаркасная часть приложения.

Давайте сначала визуализируем страницу:

В приведенном выше компоненте мы делаем две вещи:

• Первое: заявить, что вам нужен контекст
• Второе: инициализировать состояние.

Как заявить, что вам нужен контекст?

• Во-первых, дать компоненту приложенияcontextType Назначение, тип значения совпадает с типом контекста, предоставленного в Provider.
• Затем добавьте контекст в конструктор, чтобы остальная часть компонента могла пройтиthis.contextдля вызова контекста.
• Послеинициализировать состояние. Глядя на код, мы видим, что мы вызвали зависание Store в контексте.getStateметод.

Как мы видели выше, метод getState возвращает переменную, поддерживаемую в методе createStore. существуетcreateStoreПри выполнении переменная инициализируется.

Далее мы добавляем конкретные действия к знаку «плюс».

Мы хотим добавить единицу к числу, поэтому есть действие «добавить», которое является действием, и это действиеaddAction. Если вы хотите инициировать это действие, вам нужно выполнить метод отправки.

Через метод dispatch объект Action передается в Reducer, после обработки Reducer вернет новое состояние с добавлением 1.

На самом деле данные в Магазине уже актуальные, и мы видим, что страница не обновлялась. Итак, как мы можем получить последнее состояние?

подписка

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

В настоящее время нам нужно использовать метод подписки Store. Как следует из названия, я хочу подписаться на изменения состояния. Давайте посмотрим, как написан код:

в компонентеcomponentDidMountВ жизненном цикле мы называем магазинsubscribeметод, который будет вызываться каждый раз при обновлении состоянияonChangeметод; вonChangeметод, мы получим последнее состояние и присвоим значение. При удалении компонента отписываемся.

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

react-redux

В этом примере видно, что мы можем абстрагироваться от большого количества логики, такой какProviderи возможность подписаться на сохранение изменений. На самом деле этиreact-reduxЭто все сделано для нас.

• Provider:Укажите контекст, содержащий магазин
• connect:Преобразование состояния в свойства внутренних компонентов, отслеживание изменений состояния и оптимизация производительности компонентов.

В нашем примере это просто реализацияreact-reduxнекоторые функции. Для получения подробной информации вы можете перейти на официальный сайт, чтобы увидеть.

Суммировать

Давайте суммируем весь поток данных, используемый в сочетании с редукцией и реакцией:

хорошо~ Мы все заполнили всю заявку. Теперь вы понимаете, как работает Redux?

Конкретный код можно найти наGitHubПроверить.

Использованная литература:

• Говоря об архитектурных шаблонах MVC, MVP и MVVM
• Руан Ифэн - Учебное пособие по архитектуре Flux
• «Объяснение React и Redux» Ченг Мо

Постоянная ссылка на эту статью:

• Знай колонку
• адрес гитхаба