https://kalpovskii.github.io/basic-redux/
- Action
ADD_CASH
иGET_CASH
для кнопок пополнить и снять соответственно - Функция combineReducers для хранения cash- и customerReducer в едином store
- Action
ADD_CUSTOMER
иREMOVE_CUSTOMER
для добавления и удаления пользователей - Jsonplaceholder и Redux Thunk для запроса списка пользователей
npm install
npm start
Действие (Action) — это объект, содержащий поле type, которое указывает на тип исполняемого экшена (обычно в виде строковой константы). Сам экшен только описывает, что именно произошло, но не описывает, как изменяется состояние приложения.
Хранилище (Store) — это объект, который хранит состояние нашего приложения (application state).
Редюсер (Reducer) — это чистая функция, которая принимает предыдущее состояние и экшн (state и action) и возвращает обновлённое состояние. Т.е. редюсеры определяют, как состояние приложения изменяется в ответ на экшены, отправленные в стор.
1. Вызов store.dispatch(action)
Экшен — это простой объект, который описывает что случилось:
{ type: 'LIKE_ARTICLE', articleId: 42 }
{ type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
{ type: 'ADD_TODO', text: 'Read the Redux docs.' }
2. Стор вызывает функцию-редюсер, который был передан
Стор передаст два аргумента при вызове редюсера: текущее состояние и экшен.
Редюсер — это чистая функция. Он не должен совершать никаких сайд-эффектов, таких как обращение к API
или маршрутизация по приложению. Всё это должно происходить только после того, как экшен будет совершён.
3. Главный редюсер может комбинировать результат работы нескольких редюсеров в единственное дерево состояния приложения.
Redux поставляется с хелпером combineReducers
, полезным для «разделения» главного редюсера на отдельные функции, которые управляют отдельными ветвями дерева состояния.
4. Cтор сохраняет полное дерево состояния, которое возвращает главный редюсер.
Это новое дерево является следующим состоянием приложения. Каждый слушатель, зарегистрированный с помощью store.subscribe(listener)
, будет вызван. Слушатели могут вызывать store.getState()
для получения текущего состояния приложения.
Мидлвары в Redux — это функции, которые перехватывают действия (логгер, девтулзы, асинхронное общение с API, роутинг). Это удобно, потому что по умолчанию экшены в Redux являются синхронными, что является проблемой для приложения, которому нужно взаимодействовать с серверным API или выполнять другие асинхронные действия.
Популярные мидлвары: redux-thunk
, redux-saga
.