Существует бесчисленное множество длинных и сложных статей, пытающихся описать Redux, но сам Redux на самом деле является простой библиотекой. Легко заблудиться в глубине, когда все, что нужно, - это мертвенно простой пример логического процесса, на который можно сослаться. Таким образом, я создал это безумно простое резюме.
Redux: библиотека, которая хранит и обновляет все состояние приложения самым простым способом, используя при этом минимальное количество шаблонного кода.
Действия: простой объект, возвращаемый чистой функцией без побочных эффектов. Объект действия содержит «тип» и любую необходимую информацию для обновления состояния. Объект отправляется в хранилище с помощью dispatch (), и хранилище обновляет состояние, используя информацию, содержащуюся в объекте действия. Действия описывают, что что-то произошло.
Редуктор: чистая функция, которая принимает текущее состояние и действие и выполняет обновление состояния. Возвращает новое состояние. Обычно используйте оператор switch, который считывает action.type, а затем создает новое состояние с этим действием, которое по-прежнему является простым JavaScript.
Хранилище: существует только одно, и оно хранит все состояние в одном объекте. Присвойте его переменной с помощью createStore(combinedReducer). Хранилище передает редуктору два аргумента - предыдущее состояние и действие.
Поток:
- Взаимодействие, требующее обновления
- Позвоните
store.dispatch(action) - Redux store вызывает редуктор
- Корневой редуктор может объединять выходные данные нескольких редукторов в одно дерево состояний.
- Хранилище Redux сохраняет полное дерево состояний, возвращаемое корневым редуктором.
- Компоненты «подписываются» через функцию подключения и соответственно обновляются.
Если вы нашли эту статью полезной, нажмите 👏 . Следуй за мной, чтобы увидеть больше статей о React, Node.js, JavaScript и программном обеспечении с открытым исходным кодом! Вы также можете найти меня в Twitter и gitconnected.
