Поток Redux:

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

  1. Магазин: в магазине хранится состояние вашего приложения. Он создается путем передачи функции редуктора методу 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.

Итак, подведем итог: отправляется действие, которое запускает редюсер для обновления хранилища с новым состоянием. Затем все компоненты, подписанные на хранилище, будут повторно отображены с обновленным состоянием.