Приложения, использующие Flux, имеют три основные части: диспетчер (dispatcher) , хранилище данных (store) и представления (view) - стандартные компоненты React.
Actions - представляют собой способы взаимодействия пользователей с приложением.
Stores — это структуры, в которых хранится состояние приложения, а также логика обновления этого состояния.
State должeн быть изменен (или мутирован) в ответ на полученный action. Таким образом, stores не должны иметь сеттеры, а только геттеры.
Dispatcher получает действие (action) и перенаправляет его в каждое хранилище (store) приложения.
Несколько важных вещей:
- любое приложение Flux имеет только один dispatcher
- каждое действие (action) отправляется в каждый store.
Другими словами, можно сказать, что dispatcher существует для направления трафика, выступая в качестве центрального интерфейса между actions и stores
Views — это то, что пользователь видит и с чем взаимодействует. Они являются интерфейсом для отображения данных из store, а также для отправки actions обратно в store через dispatcher.
const Actions = {
addTodo(text) {
TodoDispatcher.dispatch({
type: TodoActionTypes.ADD_TODO,
text,
});
},
}
switch (action.type) {
case TodoActionTypes.ADD_TODO:
return state.set(
id,
new Todo({
id,
text: action.text,
complete: false,
}),
);
}-Redux,Mobx,Effector -Ngrx -Vuex(Pinia)
Упростил концепции Flux
Redux избавляется от концепции диспатчера (dispatcher), т.к одна Store
Одна store, есть механизмы которые разбивают сторы (combine reducers)
Хранилище (store): хранит состояние приложения
Действия (actions): некоторый набор информации, который исходит от приложения к хранилищу и который указывает, что именно нужно сделать. Для передачи этой информации у хранилища вызывается метод dispatch().
Создатели действий (action creators): функции, которые создают действия
Reducer — это чистые функции, которые принимают текущее состояние (state) и заданное действие (action) в качестве аргументов, и выводят либо не измененное состояние, либо новую копию состояния.
const counter = (state = { counter: 0 }, action) => {
switch (action.type) {
case 'INCREMENT_COUNTER':
return {
...state,
counter: state.counter + 1
}
case 'DECREMENT_COUNTER':
return {
...state,
counter: state.counter - 1
}
default:
return state
}
}
Недостотак в том что не существовало четкого разделения данные на состояния и кешь
Состояния - то что изменяется с течением жизни приложения
Кешь - данные которые были получены из вне и после этого они не изменяются
Когда есть данные, которые изменяются извне, ajax, интервалы, ws, пользовательские действия
Если данные нужны на нескольких страницах подряд