Flux, Redux, Vuex, MobX для управления состоянием (концепции)

Эта статья представляет собой краткий обзор нескольких распространенных режимов управления состоянием Flux, Redux, Vuex и MobX, она ориентирована на концептуальный уровень и не включает слишком много кода.

государственное управление

Что такое государственное управление?

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

Зачем нужно государственное управление?

совместное использование состояния

Обычно между компонентами существует какое-то общее состояние.В Vue или React мы обычно продвигаем эту часть состояния в общий родительский компонент.propsВ , родительский компонент единообразно управляет общим состоянием, и изменения состояния также выполняются родительским компонентом и передаются вниз. Это приводит к двум проблемам:

• Разделяемое состояние необходимо продвигать к общему родительскому компоненту, если общего родительского компонента нет, часто приходится создавать его самостоятельно.
• Состояние передается сверху вниз родительским компонентом слой за слоем, если компонентов слишком много, то передача данных сильно усложнится.

отслеживание изменений

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

Режим магазина

Режим хранилища — это относительно простой режим управления состоянием, который обычно имеет следующие соглашения:

• Состояние хранится во внешней переменнойstorein (также может быть глобальной переменной)
• storeсерединаstateиспользуется для хранения данных с помощьюstoreобслуживание экземпляра
• storeсерединаactionsупакованные измененияstateлогика

Блок-схема выглядит следующим образом:

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

Flux

Flux — это архитектурная идея, похожая на MVC, MVVM и т. д.

Состав флюса

Flux делит приложение на четыре части:

• View: просмотр слоя
• Action: действие, то есть объект сообщения об изменении данных (которое может быть вызвано событиями, тестовыми примерами и т. д.)
  • Изменения в Магазине можно вносить только через Действия
  • Логика обработки конкретных действий обычно размещается в магазине.
  • Объект действия содержит тип (тип) и полезную нагрузку (параметр передачи)
• Dispatcher: Диспетчер, получение действий, отправка во все магазины
• Store: уровень данных, способ хранения статуса приложения и статуса обновления, когда происходит изменение, напоминание представлениям об обновлении страницы.

Notice:

• Действие, по сути, является чисто декларативной структурой данных, которая предоставляет только описание события, а не конкретную логику события.. Обычно отдается действиюtypeСвойству присваивается строка в верхнем регистре, указывающая, что оно является константой, для повышения удобства сопровождения, например:

{
  type: 'ADD_USER',
  payload: {
    name: 'user_name'                              
  }
}

Особенности потока

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

Redux

Состав Редукса

• Store: сохранить состояние приложения --stateи для запускаstateобновленdispatchметод и др.Существует только один магазин для всего приложения.. В магазине предусмотрено несколько управленийstateAPI:
  • store.getState(): получить текущее состояние
  • store.dispatch(action):вызыватьstateизменить (единственный способ)
  • store.subscribe(listener):настраиватьstateИзменена функция прослушивателя (если функция обновления представления передается как прослушиватель, она может запускать автоматический рендеринг представления)
• Action: То же, что и Flux, Action — это объект сообщения, используемый для обновления состояния, выдаваемый View.
  • Существует Action Creator, который специально генерирует Action, который по сути является функцией, возвращающей объект Action.
• Reducer: это основаaction.typeвозобновитьstateи вернутьсяnextStateзаменить оригиналstateизСинхронизированная чистая функция(Возвращать тот же результат для тех же параметров, не изменять параметры, не полагаться на внешние переменные). То есть новое состояние получается из состояния приложения и действия:(previousState, action) => newState.Редуктор возвращает новое состояние

Общий процесс таков: Создатель действий =>action => store.dispatch(action) => reducer(state, action) => state = nextState. Блок-схема выглядит следующим образом:

Middleware

Redux также поддерживает промежуточное ПО для управления асинхронными потоками данных.

Промежуточное ПО Redux правильноstore.dispatch()Метод, осуществляемый после упаковки, можетdispatchПередать функцию или обещание, отличное от действия; передатьapplyMiddlewareметод применения промежуточного программного обеспечения. (Когда последнее ПО промежуточного слоя в цепочке ПО промежуточного слоя начинает отправлять действие, это действие должно быть обычным объектом.)

Часто используемые библиотеки: redux-actions, redux-thunk, redux-promise.

const store = createStore(
  reducer,
  // 依次执行
  applyMiddleware(thunk, promise, logger)
)

Особенности Редукса

• Однонаправленный поток данных. Представление выдает действие (store.dispatch(action)), Store вызывает Reducer для вычисления нового состояния, а если состояние изменяется, вызывает функцию прослушивателя для повторного рендеринга View (store.subscribe(render))
• единственный источник правды, только с одним магазином
• состояние доступно только для чтения, после каждого обновления состояния может быть возвращено только новое состояние
• Диспетчера нет, но метод отправки интегрирован в Магазин,store.dispatch()это единственный способ для представления выполнить действие
• Поддерживает использование промежуточного программного обеспечения (Middleware) для управления асинхронным потоком данных.

Vuex

Vuex — это шаблон управления состоянием для Vue.

Основные концепции Vuex

• Store: Vuex принимаетодно дерево состояний, каждое приложение имеет только один экземпляр Store, который содержит состояние, действия, мутации, геттеры, модули под этим экземпляром
• State: Vuex дляединственный источник правды
  • в состоянии пройтиmapStateВспомогательные функции для доступа к состоянию как к вычисляемому свойству или использования его после внедрения состояния в глобальную через Store.this.$store.stateдоступ
  • Представление обновления состояния реализовано через механизм двусторонней привязки vue.
• Getter: Эффект геттера и после некоторых фильтров, похожих, можно отфильтровать выходное состояние.
• Mutation:Мутация — единственный способ изменить состояние в vuex.(в строгом режиме) и только синхронно. через Vuexstore.commit()вызов мутации
• Action: некоторые из государственныхАсинхронная работаМожно перевести в действие и изменить состояние, отправив Мутаион в действие.
  • Пропуск действияstore.dispatch()триггер метода
  • в состоянии пройтиmapActionsВспомогательная функция сопоставляет методы компонента vue сstore.dispatchВызов (сначала необходимо ввести хранилище в корневом узле)
• Module: Когда объект Store слишком велик, его можно разделить на несколько модулей в соответствии с конкретными бизнес-требованиями, каждый модуль имеет свое собственное состояние, мутацию, действие, геттер.

Особенности Vuex:

• Однонаправленный поток данных. Посмотреть черезstore.dispatch()Вызовите Action после того, как Action завершит выполнение асинхронной операции черезstore.commit()Вызов Mutation для обновления State и просмотра обновления с помощью механизма реагирования vue.
• единственный источник правды, как и Redux, в глобальном масштабе существует только один экземпляр Store.
• Может применяться только к Vue

MobX

Философия MobX:

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

это значит,При изменении состояния все, что применяется к состоянию, автоматически обновляется..

Основные концепции MobX

• State: данные, которые управляют приложением
• Computed values: Рассчитано.Если вы хотите создать значение на основе текущего состояния, используйте вычисляемый
• Reactions: Реагировать, происходит автоматически при изменении состояния
• Actions: Действие, используемое для изменения состояния
• Сбор зависимостей (автозапуск): Данные в MobX основаны наШаблон наблюдателя, добавить наблюдателя через метод autoRun

Возьмите каштан:

const obj = observable({
  a: 1,
  b: 2
})

autoRun(() => {
  console.log(obj.a)
})

obj.b = 3 // 什么都没有发生
obj.a = 2 // observe 函数的回调触发了，控制台输出：2

Особенности Mobx

• Поток потока данных неестественен, и только используемые данные вызовут привязку.Локальные точные обновления (детальный контроль)
• Нет возможности оглянуться назад, потому что данные имеют только одну ссылку
• объектно-ориентированный
• Часто несколько магазинов
• Менее инвазивный код
• Простой и масштабируемый
• Использование MobX для больших проектов может затруднить сопровождение кода.

Суммировать

• Flux, Redux, Vuex — всеОднонаправленный поток данных
• Redux и Vuex основаны на Flux, Redux более общий, Vuex можно использовать только для vue.
• Flux и MobX могут иметь несколько магазинов, Redux и Vuex имеют только один магазин в глобальном масштабе (одно дерево состояний)
• Redux и Vuex подходят для управления состоянием крупных проектов, а применение MobX в крупных проектах ухудшит ремонтопригодность кода
• Промежуточное программное обеспечение представлено в Redux, которое в основном решает побочные эффекты, вызванные асинхронностью, и может выполнять многие сложные задачи с помощью соглашений.
• MobX — один из наименее навязчивых кодов в библиотеке управления состоянием.Он обладает преимуществами мелкозернистого управления, простой масштабируемости и т. д., но не имеет возможности оглянуться назад во времени.В целом подходит для небольших и средние проекты.

Ссылаться на:

• Вууху. Руан Ифэн.com/blog/2016/0…
• Вууху. Руан Ифэн.com/blog/2016/0…
• zhuanlan.zhihu.com/p/53599723
• vuex.vuejs.org/zh/
• cn.redux.js.org/
• cn.mobx.js.org/