Какие нужны компоненты чтобы работал Redux?

Архитектурные компоненты Redux

Для работы Redux — библиотеки управления состоянием (state management) — требуется несколько ключевых компонентов, которые образуют предсказуемый контейнер состояния приложения. Вот основные элементы:

1. Store (Хранилище)

Хранилище — это централизованный контейнер, который хранит всё состояние приложения. В приложении должен быть только один store. Он создаётся с помощью функции createStore() (или configureStore() в Redux Toolkit).

import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer);

2. Actions (Действия)

Действия — это простые объекты, которые описывают, что произошло в приложении. Они являются единственным источником информации для store. Каждое действие должно иметь поле type (обычно строка-константа), а также может содержать дополнительные данные в поле payload.

// Пример action creator (создателя действия)
const addTodo = (text) => ({
  type: 'ADD_TODO',
  payload: {
    text,
    id: Date.now(),
  },
});

3. Reducers (Редьюсеры)

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

const initialState = {
  todos: [],
};

const todoReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return {
        ...state,
        todos: [...state.todos, action.payload],
      };
    default:
      return state;
  }
};

4. Action Creators (Создатели действий)

Создатели действий — это функции, которые возвращают объекты действий. Они инкапсулируют процесс создания действий, что упрощает их диспетчеризацию и тестирование.

// Action creator
export const removeTodo = (id) => ({
  type: 'REMOVE_TODO',
  payload: id,
});

5. Dispatch (Диспетчеризация)

Диспетчеризация — это процесс отправки действий в store. Метод store.dispatch() является единственным способом изменить состояние. При вызове dispatch(action) Redux запускает процесс обновления состояния через редьюсеры.

// Диспетчеризация действия
store.dispatch(addTodo('Изучить Redux'));

6. Selectors (Селекторы)

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

// Селектор для получения всех задач
export const selectAllTodos = (state) => state.todos;

7. Middleware (Промежуточное ПО)

Промежуточное ПО — это механизм расширения функциональности Redux. Middleware позволяет перехватывать действия до того, как они достигнут редьюсера, для выполнения побочных эффектов (например, асинхронных операций). Популярные middleware: redux-thunk, redux-saga, redux-observable.

import { applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

const store = createStore(rootReducer, applyMiddleware(thunk));

8. Подключение к React (React-Redux)

Для интеграции Redux с React-приложениями необходима библиотека react-redux. Она предоставляет два ключевых компонента:

• <Provider>: Компонент высшего порядка, который делает store доступным для всех дочерних компонентов.
• connect() или хуки (useSelector, useDispatch): Механизмы для подключения компонентов к store.

import { Provider } from 'react-redux';
import { useSelector, useDispatch } from 'react-redux';

const App = () => {
  const todos = useSelector((state) => state.todos);
  const dispatch = useDispatch();

  return (
    <Provider store={store}>
      {/* Компоненты приложения */}
    </Provider>
  );
};

Взаимодействие компонентов Redux

Принцип работы Redux можно описать как однонаправленный поток данных:

1. Пользовательское взаимодействие в UI вызывает dispatch(action).
2. Store передаёт текущее состояние и действие в редьюсер.
3. Редьюсер на основе действия возвращает новое состояние.
4. Store обновляет состояние и уведомляет все подписанные компоненты.
5. Компоненты получают обновлённые данные через селекторы и перерисовываются.

Современный подход: Redux Toolkit (RTK)

Сегодня рекомендуется использовать Redux Toolkit — официальный набор инструментов, который упрощает настройку Redux. RTK включает:

• configureStore(): Упрощённое создание store с настройками по умолчанию.
• createSlice(): Автоматическая генерация действий и редьюсеров.
• createAsyncThunk(): Обработка асинхронных операций.

import { configureStore, createSlice } from '@reduxjs/toolkit';

const todoSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push(action.payload); // В RTK можно использовать мутации
    },
  },
});

export const { addTodo } = todoSlice.actions;
export default configureStore({ reducer: todoSlice.reducer });

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