Что такое Redux?

Redux — это предсказуемый контейнер состояния для JavaScript-приложений. Он помогает управлять состоянием приложения централизованно, делая его консистентным, предсказуемым и облегчая отладку.

Основные принципы Redux:

1. Единый источник истины: Состояние всего приложения хранится в одном объекте внутри одного Store.
2. Состояние только для чтения (Read-only state): Состояние приложения нельзя изменить напрямую. Единственный способ изменить состояние — это отправить (dispatch) Action — простой JavaScript-объект, описывающий, что произошло.
3. Изменения происходят с помощью чистых функций (Reducers): Для определения того, как состояние изменяется в ответ на Actions, используются Reducers. Reducer — это чистая функция, которая принимает текущее состояние и Action, и возвращает новое состояние.

Ключевые компоненты Redux:

• Store: Объект, который объединяет состояние, Action и Reducers. Он хранит состояние приложения, предоставляет методы для получения текущего состояния (getState), отправки Actions (dispatch) и подписки на изменения (subscribe).
• Action: Простой JavaScript-объект, описывающий событие, которое произошло. У него обязательно должно быть свойство type, обычно строковое. Могут содержать полезную нагрузку (payload) с данными.
• Reducer: Чистая функция, которая определяет, как состояние приложения изменяется в ответ на Action. Принимает текущее состояние и Action, возвращает новое состояние. Не должна мутировать исходное состояние, выполнять побочные эффекты (side effects) или вызывать нечистые функции (например, Math.random()).
• Dispatcher: Метод Store (dispatch) для отправки Actions.
• Selector: Функция, которая принимает состояние Store в качестве аргумента и возвращает часть состояния. Часто используется в связке с React-Redux (useSelector).

Пример простого Action и Reducer:

// actions.js
const INCREMENT = 'INCREMENT';

function incrementCounter() {
  return {
    type: INCREMENT
  };
}

// reducers.js
const initialState = {
  count: 0
};

function counterReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return {
        ...state, // Копируем текущее состояние
        count: state.count + 1 // Обновляем только нужное поле
      };
    default:
      return state; // Возвращаем текущее состояние, если Action не относится к этому Reducer
  }
}

// store.js
import { createStore } from 'redux';
import counterReducer from './reducers';

const store = createStore(counterReducer);

// Пример использования
console.log(store.getState()); // { count: 0 }

store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }

Redux часто используется с библиотеками для работы с UI, такими как React (через React-Redux), для связывания компонентов с состоянием Store. Для сложных асинхронных операций (например, запросов к API) используются middleware (например, redux-thunk или redux-saga).