Использование Redux Toolkit для упрощения работы с состоянием

Redux Toolkit — это официальная, рекомендуемая библиотека для работы с Redux. Она была создана для решения нескольких проблем, которые возникали при использовании обычного Redux:

• Слишком много шаблонного кода.
• Множество настроек для создания даже простого проекта.
• Необходимость вручную соединять разные части, такие как actions и reducers.

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

Почему стоит использовать Redux Toolkit?

Вот несколько ключевых причин, почему Redux Toolkit заслуживает вашего внимания:

1. Меньше шаблонного кода: Redux Toolkit автоматически создаёт экшены и редьюсеры на основе переданных функций, избавляя разработчика от необходимости вручную определять каждую мелочь.
2. Улучшенная производительность: Redux Toolkit включает оптимизации, которые позволяют приложению работать быстрее и потреблять меньше ресурсов.
3. Простота использования: Вся настройка и структура более интуитивны. Вам не нужно тратить время на создание стандартных паттернов — все уже включено.

Основные компоненты Redux Toolkit

Прежде чем углубиться в примеры, давайте рассмотрим основные компоненты, которые предлагает Redux Toolkit.

1. configureStore: Это функция, которая создаёт хранилище (store). В отличие от обычного Redux, она уже включает в себя несколько важных инструментов, таких как Redux Thunk для асинхронных операций.
2. createSlice: Эта функция позволяет создавать редьюсеры и экшены одновременно, что значительно упрощает управление состоянием.
3. createAsyncThunk: Это утилита для обработки асинхронных операций. С её помощью можно легко создавать экшены для выполнения запросов на сервер и обработки их результатов.
4. createReducer и createAction: Если вам нужно больше контроля над процессом, вы можете использовать эти утилиты для создания редьюсеров и экшенов вручную.

Как использовать Redux Toolkit

Теперь, когда мы разобрались с основными компонентами, давайте посмотрим, как всё это работает на практике. Представим, что мы создаём простое приложение по управлению задачами (todo list).

Шаг 1: Установка Redux Toolkit

Первое, что нужно сделать, — установить необходимые зависимости. Это можно сделать с помощью npm или yarn:

npm install @reduxjs/toolkit react-redux

Шаг 2: Настройка хранилища

После установки можно создать хранилище. Для этого в папке src создаём папку store и файл store.js. В этом файле будет храниться вся логика настройки нашего хранилища.

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

import tasksReducer from '../features/tasks/tasksSlice';



export const store = configureStore({

  reducer: {

    tasks: tasksReducer,

  },

});

Здесь мы импортируем configureStore и подключаем наш редьюсер для задач (о котором поговорим позже). Благодаря configureStore мы получаем готовое хранилище без необходимости вручную подключать middleware или другие вспомогательные функции.

Шаг 3: Создание slice

Теперь создадим файл tasksSlice.js, который будет содержать логику для управления задачами. С помощью createSlice мы можем сразу создать экшены и редьюсеры.

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



const initialState = {

  tasks: [],

};



const tasksSlice = createSlice({

  name: 'tasks',

  initialState,

  reducers: {

    addTask: (state, action) => {

      state.tasks.push(action.payload);

    },

    removeTask: (state, action) => {

      state.tasks = state.tasks.filter(task => task.id !== action.payload);

    },

  },

});



export const { addTask, removeTask } = tasksSlice.actions;

export default tasksSlice.reducer;

Здесь createSlice позволяет нам одновременно создать два экшена (addTask и removeTask) и редьюсер для управления списком задач. Обратите внимание на то, что Redux Toolkit автоматически использует библиотеку Immer, что позволяет напрямую изменять состояние без нарушения принципов иммутабельности.

Шаг 4: Подключение к компоненту

Теперь давайте свяжем наше хранилище с React-компонентами. Для этого нам нужно обернуть наше приложение в Provider, который предоставит доступ к Redux хранилищу.

В файле index.js:

import React from 'react';

import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';

import { store } from './app/store';

import App from './App';



ReactDOM.render(

  <Provider store={store}>

    <App />

  </Provider>,

  document.getElementById('root')

);

Теперь наше приложение готово к работе с состоянием.

Шаг 5: Использование состояния в компонентах

Внутри компонентов мы можем использовать хук useSelector для доступа к состоянию и хук useDispatch для отправки экшенов. Например, давайте создадим компонент для добавления и удаления задач:

import React, { useState } from 'react';

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

import { addTask, removeTask } from './features/tasks/tasksSlice';



export function TaskManager() {

  const tasks = useSelector((state) => state.tasks.tasks);

  const dispatch = useDispatch();

  const [taskName, setTaskName] = useState('');



  const handleAddTask = () => {

    dispatch(addTask({ id: Date.now(), name: taskName }));

    setTaskName('');

  };



  const handleRemoveTask = (id) => {

    dispatch(removeTask(id));

  };



  return (

    <div>

      <input

        type="text"

        value={taskName}

        onChange={(e) => setTaskName(e.target.value)}

        placeholder="Enter task name"

      />

      <button onClick={handleAddTask}>Add Task</button>

      <ul>

        {tasks.map((task) => (

          <li key={task.id}>

            {task.name}

            <button onClick={() => handleRemoveTask(task.id)}>Remove</button>

          </li>

        ))}

      </ul>

    </div>

  );

}

Здесь мы используем useSelector для получения списка задач из состояния, а useDispatch — для добавления и удаления задач. Таким образом, мы легко можем управлять состоянием приложения.

Шаг 6: Работа с асинхронными действиями

Redux Toolkit также предоставляет простой способ работы с асинхронными операциями с помощью createAsyncThunk. Давайте рассмотрим пример, где мы загружаем задачи с сервера.

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



export const fetchTasks = createAsyncThunk('tasks/fetchTasks', async () => {

  const response = await fetch('/api/tasks');

  const data = await response.json();

  return data;

});



const tasksSlice = createSlice({

  name: 'tasks',

  initialState: { tasks: [], status: 'idle' },

  reducers: {},

  extraReducers: (builder) => {

    builder

      .addCase(fetchTasks.pending, (state) => {

        state.status = 'loading';

      })

      .addCase(fetchTasks.fulfilled, (state, action) => {

        state.tasks = action.payload;

        state.status = 'succeeded';

      })

      .addCase(fetchTasks.rejected, (state) => {

        state.status = 'failed';

      });

  },

});



export default tasksSlice.reducer;

В этом примере createAsyncThunk используется для выполнения асинхронного запроса на сервер, а с помощью extraReducers мы обрабатываем три состояния запроса: ожидание, успех и ошибку.

Шаг 7: Отладка с помощью DevTools

Redux Toolkit автоматически подключает Redux DevTools, если они установлены в вашем браузере. Это позволяет вам отслеживать и отлаживать состояние приложения в реальном времени, что является отличным преимуществом при разработке.