Redux и state management

Архитектура Redux

Redux — это библиотека для предсказуемого управления состоянием приложений на JavaScript, часто используемая вместе с React и Chakra UI для построения масштабируемых интерфейсов. Основной принцип Redux заключается в едином источнике правды — глобальном хранилище (store), которое содержит все состояние приложения. Изменения состояния происходят только через действия (actions) и редьюсеры (reducers), обеспечивая предсказуемость и прозрачность изменений.

Ключевые элементы Redux:

  • Store – объект, хранящий всё состояние приложения. Создается с помощью функции createStore или современных инструментов configureStore из Redux Toolkit.
  • Actions – объекты с обязательным полем type, описывающие событие, которое должно изменить состояние.
  • Reducers – чистые функции, принимающие текущее состояние и действие, возвращающие новое состояние.
  • Selectors – функции для выборки определенных частей состояния из store.

Интеграция Redux с React и Chakra UI

Для интеграции Redux с React используется библиотека react-redux. Основные шаги:

  1. Создание хранилища (store) с помощью configureStore.
  2. Оборачивание всего приложения в .
  3. Использование useSelector для чтения состояния и useDispatch для отправки действий.

Пример:

import { configureStore } from '@reduxjs/toolkit';
import { Provider, useDispatch, useSelector } from 'react-redux';
import counterReducer from './counterSlice';

const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
});

function App() {
  return (
    
      
    
  );
}

function Counter() {
  const count = useSelector((state) => state.counter.value);
  const dispatch = useDispatch();

  return (
    

      
{count}

      
    

  );
}

Создание slice с Redux Toolkit

Redux Toolkit позволяет сократить количество шаблонного кода, используя slice — объединение reducers и actions в одном месте.

Пример slice для счетчика:

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

export const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
    reset: (state) => { state.value = 0; },
  },
});

export const { increment, decrement, reset } = counterSlice.actions;
export default counterSlice.reducer;

Управление глобальным состоянием компонентов Chakra UI

Chakra UI предоставляет обширный набор компонентов, взаимодействующих с состоянием. Использование Redux позволяет управлять состоянием этих компонентов централизованно:

  • Модальные окна (Modal) – состояние открытия/закрытия можно хранить в Redux.
  • Табы (Tabs) – активный индекс можно синхронизировать с Redux для управления глобальными переходами.
  • Темизация (ColorMode) – можно использовать Redux для сохранения выбора темы между страницами.

Пример управления модальным окном:

import { Modal, ModalOverlay, ModalContent, Button } from '@chakra-ui/react';
import { useSelector, useDispatch } from 'react-redux';
import { openModal, closeModal } from './modalSlice';

function CustomModal() {
  const isOpen = useSelector((state) => state.modal.isOpen);
  const dispatch = useDispatch();

  return (
    <>
      
       dispatch(closeModal())}>
        
        
          
Содержимое модального окна

        
      
    
  );
}

Асинхронные действия с Redux Thunk

Для взаимодействия с внешними API используются асинхронные действия (thunks). Они позволяют выполнять запросы и обновлять состояние после получения данных.

Пример асинхронного запроса:

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

export const fetchUsers = createAsyncThunk(
  'users/fetchUsers',
  async () => {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    return response.json();
  }
);

const usersSlice = createSlice({
  name: 'users',
  initialState: { list: [], status: 'idle' },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => { state.status = 'loading'; })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.list = action.payload;
      })
      .addCase(fetchUsers.rejected, (state) => { state.status = 'failed'; });
  },
});

export default usersSlice.reducer;

Совместное использование Chakra UI и Redux

Комбинация Chakra UI и Redux позволяет создавать интерактивные интерфейсы с предсказуемым поведением:

  • Компоненты UI полностью управляются глобальным состоянием.
  • Локальные состояния (useState) используются только для временных, изолированных данных.
  • Все важные изменения состояния приложения проходят через Redux, что упрощает отладку и тестирование.

Например, табы, модальные окна, уведомления (Toast) и элементы формы можно централизованно контролировать через Redux, синхронизируя UI и данные без дублирования логики.

Оглавление