Redux — это контейнер предсказуемого состояния для приложений JavaScript, который может помочь вам управлять глобальным состоянием вашего приложения более организованным и удобным для сопровождения способом. Ключевыми понятиями Redux являются хранилище, редукторы, действия и отправка.

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

Редюсеры: редукторы — это чистые функции, которые принимают текущее состояние и действие и возвращают новое состояние на основе действия. Редюсеры отвечают за обновление состояния хранилища в ответ на действия, отправляемые приложением. Состояние, возвращаемое редюсером, должно быть новым объектом, а не измененной версией предыдущего состояния. Вот пример простого редуктора:

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

В приведенном выше примере редюсер обновляет состояние на основе двух действий: INCREMENT и DECREMENT. Когда отправляется действие INCREMENT, редюсер возвращает новый объект со свойством count, увеличенным на 1. Аналогично, когда отправляется действие DECREMENT, редьюсер возвращает новый объект со свойством count, уменьшенным на 1.

Действия. Действия — это простые объекты JavaScript, которые описывают изменения в состоянии приложения. Они должны иметь свойство type, описывающее тип выполняемого действия, а также могут включать любые дополнительные данные, необходимые для выполнения действия. Действия обычно создаются с помощью функций создателя действий, которые возвращают объект действия. Вот пример функции создания действия:

function increment() {
  return { type: 'INCREMENT' };
}

В приведенном выше примере функция increment возвращает объект действия с типом INCREMENT.

Отправка: Отправка — это функция, используемая для отправки действий в магазин. Когда действие отправлено, хранилище вызывает редукторы с текущим состоянием и действием, и редукторы возвращают новое состояние. Затем хранилище обновляет свое состояние новым состоянием, возвращаемым редьюсерами. Dispatch обычно вызывается из компонентов или других частей приложения, которым необходимо обновить состояние. Вот пример того, как использовать диспетчеризацию для обновления счетчика:

import { createStore } from 'redux';
import counterReducer from './counterReducer';

const store = createStore(counterReducer);
store.dispatch({ type: 'INCREMENT' });

В приведенном выше примере функция createStore создает новое хранилище, используя файл counterReducer. Затем функция dispatch используется для отправки действия INCREMENT в хранилище, которое обновляет счетчик в состоянии хранилища.

Одним из преимуществ использования Redux является то, что он может упростить архитектуру вашего приложения и сделать его более удобным для тестирования и сопровождения. Сохраняя все свое состояние в одном централизованном расположении, вы можете легко анализировать изменения в ваших данных с течением времени. Кроме того, поскольку Redux полагается на чистые функции и простые объекты JavaScript, ваш код легко тестировать и отлаживать.

Тестируемость — еще одна приятная ключевая особенность Redux, которая делает ваше приложение более тестируемым. Поскольку управление состоянием централизовано и предсказуемо, становится проще писать тесты, гарантирующие, что ваше приложение ведет себя должным образом. Написав тесты для ваших действий и редукторов, вы можете быть уверены, что ваши изменения состояния работают правильно и что вы не вводите регрессии при добавлении новых функций.

describe('incrementCounter', () => {
  it('should increment the counter by 1', () => {
    const initialState = { count: 0 };
    const action = { type: 'INCREMENT_COUNTER' };
    const newState = reducer(initialState, action);
    expect(newState.count).toEqual(1);
  });

Приведенный выше код определяет тест для действия incrementCounter с использованием среды тестирования Jest. Тест устанавливает начальное состояние, отправляет действие и ожидает, что новое состояние будет иметь счетчик, равный 1. Этот тест демонстрирует, как Redux упрощает тестирование отдельных действий и их влияние на состояние приложения.

Хотя Redux — мощный инструмент, он может быть не лучшим выбором для каждого проекта. Например, если у вас есть небольшое приложение с простыми потребностями в управлении состоянием, вам может быть лучше использовать React Context или другое более простое решение, такое как Zustand, которое я собираюсь использовать в одном из моих будущих проектов. Все сводится к вариантам использования и особенностям вашего проекта.

Наконец, я настоятельно рекомендую прочитать документацию Redux, чтобы начать и постепенно углубляться в каждую концепцию. Это определенно помогло мне лучше понять это быстрее, чем просмотр учебных пособий на Youtube, а также написание этой статьи. Я решил написать это, чтобы сохранить его в качестве справочного материала для себя, поэтому, надеюсь, вы найдете его полезным. Приятного чтения!