Поток Redux:
В Redux поток обычно начинается с отправки действия, которое запускает редюсер для обновления хранилища. Вот разбивка каждого термина:
- Магазин: в магазине хранится состояние вашего приложения. Он создается путем передачи функции редуктора методу
createStoreиз библиотекиredux.
Вот пример создания магазина:
импортировать {createStore} из «редукции»;
const InitialState = {количество: 0};
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count — 1 };
default:
return state;
}
}
const store = createStore (редуктор);
В этом примере мы создаем хранилище с начальным состоянием { count: 0 } и функцией редуктора, которая обрабатывает два действия: INCREMENT и DECREMENT.
2. Действие. Действие — это простой объект JavaScript, описывающий изменение, которое необходимо внести в состояние. Он должен иметь свойство type, а также может содержать дополнительные данные.
Вот пример действия:
const incrementAction = {тип: 'ИНКРЕМЕНТ'};
В этом примере мы создаем действие, которое имеет type из 'INCREMENT'.
3. Редуктор. Редьюсер — это чистая функция, которая принимает текущее состояние и действие и возвращает новое состояние. Он не должен изменять состояние напрямую, а вместо этого должен создавать новую копию состояния с примененными изменениями.
Вот пример редуктора:
function reducer(state = initialState, action) {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count — 1 };
default:
return state;
}
}
В этом примере мы создаем функцию-редуктор, которая обрабатывает действия INCREMENT и DECREMENT, возвращая новый объект состояния с увеличенным или уменьшенным значением свойства count.
Итак, подведем итог: отправляется действие, которое запускает редюсер для обновления хранилища с новым состоянием. Затем все компоненты, подписанные на хранилище, будут повторно отображены с обновленным состоянием.
