Что нужно знать о Redux - action/dispatch/reducer/store

Redux - это стэйт менеджер для JS приложений. Он может работать не только в React приложениях. Просто так сложилось исторически, что они часто упоминаются вместе. Redux хранит состояние в дереве объектов внутри единого стора. Единственная возможность изменить состояние - отправить action. Action это объект, который описывает действие. Он как бы отвечает на вопрос "Что я хочу изменить в состоянии?".

// types.js
const ADD_TODO = "ADD_TODO"

// actions.js
import { ADD_TODO } from "./types.js"

export const addTodoAction = {
  type: ADD_TODO,
  payload: {
     id: 1,
     text: "Изучить Redux",
     done: false
   }
}

Далее action попадает в reducer, где описано как состояние должно быть изменено ("Как я хочу изменить состояние?").

//  todo-reducer.js
import { ADD_TODO } from "./types.js"

export const todoReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO: {
      const item = action.payload
      return [...state, item]
    }
    default:
      return state
  }
}

Для чего нужен Redux?

Redux и в целом любая другая система работы с состоянием нужна для контроля над состоянием. Веб приложения усложняются, добавляются новые фичи и контроль над приложением теряется. Становится сложно охватывать большой проект как единое целое. Становится cложно передавать изменения. Встроенными способами в React их приходилось бы передавать по цепочке от одного компонента в другой или через Context API. По дороге обновленное состояние может также влиять на другие компоненты и т.д. И такая бесконтрольность расползается по всему проекту и может послужить появлению новых багов и добавит сложность в отладке. Теряется прозрачность того что происходит.

Action’ы добавляют порядок в происходящие изменения. Action - это объект, и его можно залогировать и последовательно отслеживать как меняется состояние. Подытожив, можно вывести три принципа Redux:

• Единственный источник правды - единый стор, который меняются и всегда содержит актуальные данные.
• Состояние - только для чтения. Нельзя менять его напрямую - только через action’ы.
• Изменения делаются только при помощи чистых функций.
• Эти функции (редьюсеры) принимают в качестве аргумента старое состояние и возвращают обновленное состояние. И всегда при одних и тех же данных результат этих функций будет одинаков.

Понятия в Redux

Action

Action (экшн) - это источник данных в стор, Action включает тип и некоторую информацию (payload). Тип обычно имеет строковое значение. Он нужен чтобы reducer понимал какой action был отправлен. Далее к стору будет применен payload.

Reducer

Reducer (редьюсер) - это функция, которая определяет как должно меняться состояние в зависимости от аction’а. Редьюсеры должны быть чистым функциями - они должны вычислить следующее состояние и вернуть новый объект состояния. Никаких сайд эффектов, мутаций состояния, и вызовов API в редьюсере быть не должно.

Store

Store - объединяет аction’ы и редьюсеры

• Хранит состояние приложения.
• Предоставляет доступ к состоянию через getState.
• Позволяет изменять состояние через dispatch.
• Регистрирует подписчиков через subscribe.

Теперь когда мы знаем основные понятия сформулируем флоу - движение данных в Redux. Сначала вызываем функцию dispatch, передав в нее action.

// App.jsx
import { useDispatch } from "react-redux"
import { ADD_TODO } from "./types.js"

export default App() {
  const dispatch = useDispatch()
 
  const handleTodoAdd = () => {
    dispatch({
      type: ADD_TODO,
       payload: {
         id: 1,
         text: "Изучить Redux",
         done: false
       },
    })
  }

  return (
    <button type="button" onClick={handleTodoAdd}>Добавить todo</button>
  )
}

Далее Redux вызывает переданный в него редьюсер. В редьюсер отправляется два аргумента - текущее состояние (state) и action.

//  todo-reducer.js
import { ADD_TODO } from "./types.js"

export const todoReducer = (state = [], action) => {
  switch (action.type) {
    case ADD_TODO: {
      const item = action.payload
      return [...state, item]
    }
    default:
      return state
  }
}

Redux сохраняет весь объект, который вернулся из корневого редьюсера. Почему редьюсер - корневой? В Redux передается один редьюсер, но его можно разделить на несколько и собрать вместе при помощи combineReducers. Результатом этой функции будет корневой редьюсер. Обычно это делается, когда в приложении есть несколько модулей и есть смысл разделить большой редьюсер на несколько маленьких. Но для мелких приложений это совсем не обязательно.

// reducers.js
import { combineReducers } from "redux"
import { todoReducer } from "./todo-reducer"

export const rootReducer = combineReducers({
  todos: todoReducer,
})

Как уже упоминалось, Redux работает не только с ReactJS. Это универсальный инструмент. Однако для того чтобы использовать его в ReactJS нужен специальный байндинг, который ставится как отдельный пакет - react-redux.

Как подключить Redux к ReactJS проекту

Установить Redux с помощью команды.

npm i redux react-redux

Проинициализировать store и обернуть приложение тегом <Provider> c переданным в него объектом store.

// index.js
import React from "react"
import ReactDOM from "react-dom/client"

import { createStore } from "redux"
import { Provider } from "react-redux"

import App from "./App"
import { rootReducer } from "./reducers"

const store = createStore(rootReducer)

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>
);

Payload (пэйлоад, полезная нагрузка) — это неофициальное, принятое сообществом соглашение об именовании поля, которое содержит фактические данные в объекте действия (action) в Redux. В официальной документации говорится только, что действие Redux должно быть простым объектом и должно иметь имя действия, представленное строкой: Этот простой объект, который описывает изменение, которое применяется в нашем приложении. Действия должны иметь поле для типа (type), указывающее тип выполняемого действия. Типы могут быть определены как константы и импортированы из другого модуля. Лучше использовать строки для текста, чем символы, потому что строки сериализуются. Помимо типа, структура объекта действия зависит только от программиста.

Лучшие практики сообщества

Многие вещи не стандартизированы в Redux, поэтому у вас есть максимальная гибкость, чтобы делать все по-своему, но, поскольку большинство из нас не хотят придумывать индивидуальное решение для каждой мелочи повседневной детали, сообщество имеет тенденцию устанавливать лучшие практики. Чтобы отделить этот тип от обычных данных, используется свойство payload. Теперь вопрос в том, что должно входить в эту полезную нагрузку (payload). Необязательное свойство payload МОЖЕТ иметь значение любого типа. Он представляет собой полезную нагрузку действия (redux action). Любая информация о действии, которая не является type или состоянием действия, должна быть частью поля payload. Например:

const someAction = {
  type: "Test",
  payload: {
    user: "Test User",
    age: 25
  },
}

Это общепринятое соглашение о том, чтобы иметь тип и полезную нагрузку для действия. Полезной нагрузкой может быть любой допустимый тип JS (строка, массив, объект и т.д.). Узнать больше о Редакс можно здесь.