REDUX/SAGA/MOBX Flashcards
Redux
Redux — это JS-библиотека для поддерживаемого глобального управления состоянием.
Использует патерн flux.
Патерн redux
flux
концепции однонаправленного потока данных.
В стандартной архитектуре Flux следующие компоненты:
Actions — даные содердащие имя действия которое нужно выполнить. Может содержать полезную нашрузку относящуюся к этим действиям.
Dispatcher — предназначен для передачи действий хранилищам.
Stores — действуют как контейнеры для состояния приложения и логики. Реальная работа приложения происходит в Stores
View — компонент, обычно отвечающий за выдачу информации пользователю.
Selector
Выбор тех данных из стора, которые нужно получить
Редюсеры
Редюсер — чистая функция, которая принимает предыдущее состояние и экшен (state и action) и возвращает следующее состояние (новую версию предыдущего).
function reducer(state, action) {
switch (action.type) {
case ‘ADD_TODO’: {
// Полагаю, здесь надо бы что-нибудь сделать…
}
}
}
В зависимости от разных action по разному изменяет наш стейт
dispatch
dispatch — это функция Redux store. Вы вызываете store. dispatch , чтобы отправить действие. Выполняется для изменения состояния stora
action
Это обект со свойством type и value
Говорит, что нужно сделать с данными, например, добавить что‑то в список, поменять что‑то в форме, загрузить что‑то из интернета и т. д. Action не меняет данные сам, а только передает их в reducer.
getState (useState)
С помощью dispatch() обновили, а как теперь посмотреть новое значение store? Ничего изобретать не нужно, есть метод getState(). Он также, как и метод dispatch вызывается на экземпляре объекта store. Поэтому для моего примера вызов
combineReducers
combineReducers() позволяет объединить несколько редьюсеров в один.
Если логика обновления компонентов довольно сложна и\или необходимо обрабатывать большое количество различных типов событий, то корневой reducer может стать слишком громоздким. Лучшим решением будет разбить его на несколько отдельных редьюсеров каждый из которых отвечает за обработку только одного типа событий и обновления определённого поля.
redux-saga
redux-saga или санки используют для выполнения асинхронных запросов. в зависимости от результата возвращает разные action и payload.
redux-saga - это библиотека, которая призвана упростить и улучшить выполнение сайд-эффектов (т.е. таких действий, как асинхронные операции, типа загрузки данных и “грязных” действий, типа доступа к браузерному кэшу) в React/Redux приложениях.
redux-saga - это redux мидлвар, что означает, что этот поток может запускаться, останавливаться и отменяться из основного приложения с помощью обычных redux экшенов, оно имеет доступ к полному состоянию redux приложения и также может диспатчить redux экшены.
Библиотека использует концепцию ES6, под названием генераторы, для того, чтобы сделать эти асинхронные потоки легкими для чтения, написания и тестирования.
MOBX
MOBX создает стор который реализует патерн наблюдатель. В конструкторе класса указываются аннотации для каждого свойства объекта.
В mobx используют следующие концепции в сторе:
1. state - это данные, изменение в которых отслеживаются
2. actions - это методы которые изменяют состояние state.
3. computed - это getter, который вычисляет новое значение исходя из изменений текущего state
4. reactions - моделирование побочных эффектов которые вызываются автоматически с изменением state.
(например запуск Autorun. автоматически вызывается при изменении состояния state.isHungry
autorun(() => {
if (giraffe.isHungry) {
console.log(“Now I’m hungry!”)
} else {
console.log(“I’m not hungry!”)
}
})
)
constructor() {
makeObservable(this, {
title: observable,
finished: computed,
toggle: action,
})
}
MOBX vs REDUX
MobX использует паттерн Observer, redux flux.
Redux обвиняют в boilerplate code (не творческий код). В redux нужно дополнительно подключать сторонние библиотеки (санки сага для асинхронных функций, reselect для мемоизации результата)
(Постоянно приходится писать action, reducer, selecrot, Вроде с redux-toolkit ситуация стала лучше)
В redux можно лучше делать отладку приложения, лучшие devtools. Redux нравится больше
Патерн mobx
Реализует патерн Observer
Наблюдатель — это поведенческий паттерн проектирования, который создаёт механизм подписки, позволяющий одним объектам следить и реагировать на события, происходящие в других объектах.
Паттерн Наблюдатель предлагает хранить внутри объекта издателя список ссылок на объекты подписчиков, причём издатель не должен вести список подписки самостоятельно. Он предоставит методы, с помощью которых подписчики могли бы добавлять или убирать себя из списка.
Когда в издателе будет происходить важное событие, он будет проходиться по списку подписчиков и оповещать их об этом, вызывая определённый метод объектов-подписчиков.
