kalpovskii / basic-redux

https://kalpovskii.github.io/basic-redux/

Простое приложение с использованием Redux

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

Основы Redux

Действие (Action) — это объект, содержащий поле type, которое указывает на тип исполняемого экшена (обычно в виде строковой константы). Сам экшен только описывает, что именно произошло, но не описывает, как изменяется состояние приложения.

Хранилище (Store) — это объект, который хранит состояние нашего приложения (application state).

Редюсер (Reducer) — это чистая функция, которая принимает предыдущее состояние и экшн (state и action) и возвращает обновлённое состояние. Т.е. редюсеры определяют, как состояние приложения изменяется в ответ на экшены, отправленные в стор.

Data Flow (четыре шага)

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() для получения текущего состояния приложения.

Middleware

Мидлвары в Redux — это функции, которые перехватывают действия (логгер, девтулзы, асинхронное общение с API, роутинг). Это удобно, потому что по умолчанию экшены в Redux являются синхронными, что является проблемой для приложения, которому нужно взаимодействовать с серверным API или выполнять другие асинхронные действия.

Популярные мидлвары: redux-thunk, redux-saga.