Перейти к основному содержимому
Неофициальный Бета-перевод

Эта страница переведена PageTurner AI (бета). Не одобрена официально проектом. Нашли ошибку? Сообщить о проблеме →

Быстрый старт с Redux Toolkit

Что вы узнаете
  • Как настроить и использовать Redux Toolkit с React-Redux
Предварительные требования

Введение​

Добро пожаловать в руководство по быстрому старту с Redux Toolkit! Этот туториал кратко познакомит вас с Redux Toolkit и научит правильно его использовать.

Как работать с этим учебником​

На этой странице мы сосредоточимся только на настройке Redux-приложения с помощью Redux Toolkit и основных API. Объяснения, что такое Redux, как он работает, и полные примеры использования Redux Toolkit вы найдёте в руководствах, перечисленных на странице "Индекс учебных материалов".

В этом руководстве мы предполагаем использование Redux Toolkit с React, но вы можете применять его и с другими UI-библиотеками. Примеры основаны на типичной структуре папок Create-React-App, где весь код приложения находится в папке src, но шаблоны можно адаптировать под любую структуру проекта.

Шаблон Redux+JS для Create-React-App уже содержит предварительно настроенную структуру проекта.

Краткое руководство​

Установка Redux Toolkit и React-Redux​

Добавьте пакеты Redux Toolkit и React-Redux в ваш проект:

npm install @reduxjs/toolkit react-redux

Создание Redux-хранилища​

Создайте файл src/app/store.js. Импортируйте API configureStore из Redux Toolkit. Начнём с создания пустого Redux-хранилища и его экспорта:

app/store.js
import { configureStore } from '@reduxjs/toolkit'

export default configureStore({
  reducer: {}
})

Это создаёт хранилище Redux и автоматически настраивает расширение Redux DevTools, позволяя проверять хранилище во время разработки.

Подключение Redux-хранилища к React​

После создания хранилища мы можем сделать его доступным для React-компонентов, обернув наше приложение в <Provider> из React-Redux в файле src/index.js. Импортируйте созданное хранилище, оберните ваше приложение <App> в <Provider> и передайте хранилище как пропс:

index.js
import React from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'

const root = createRoot(document.getElementById('root')!)

root.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
)

Создание среза состояния Redux​

Добавьте новый файл src/features/counter/counterSlice.js. В этом файле импортируйте API createSlice из Redux Toolkit.

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

Redux требует, чтобы все обновления состояния выполнялись иммутабельно, через создание копий данных и их обновление. Однако API createSlice и createReducer из Redux Toolkit используют Immer внутри, позволяя писать "мутабельную" логику обновления, которая преобразуется в корректные иммутабельные обновления.

features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit'

export const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    value: 0
  },
  reducers: {
    increment: state => {
      // Redux Toolkit allows us to write "mutating" logic in reducers. It
      // doesn't actually mutate the state because it uses the Immer library,
      // which detects changes to a "draft state" and produces a brand new
      // immutable state based off those changes
      state.value += 1
    },
    decrement: state => {
      state.value -= 1
    },
    incrementByAmount: (state, action) => {
      state.value += action.payload
    }
  }
})

// Action creators are generated for each case reducer function
export const { increment, decrement, incrementByAmount } = counterSlice.actions

export default counterSlice.reducer

Добавление редюсеров среза в хранилище​

Далее нам нужно импортировать функцию редюсера из слайса счётчика и добавить его в наше хранилище. Определив поле в параметре reducer, мы указываем хранилищу использовать этот слайс-редюсер для обработки всех обновлений данного состояния.

app/store.js
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'

export default configureStore({
  reducer: {
    counter: counterReducer
  }
})

Использование состояния Redux и действий в React-компонентах​

Теперь мы можем использовать хуки React-Redux для взаимодействия React-компонентов с хранилищем Redux. Чтение данных из хранилища осуществляется через useSelector, а диспетчеризация действий — через useDispatch. Создайте файл src/features/counter/Counter.js с компонентом <Counter>, затем импортируйте его в App.js и отобразите внутри <App>.

features/counter/Counter.js
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'

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

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Decrement
        </button>
      </div>
    </div>
  )
}

Теперь при каждом нажатии кнопок "Increment" (Увеличить) и "Decrement" (Уменьшить):

  • Соответствующее действие Redux будет отправлено в хранилище

  • Редюсер слайса счётчика обработает действие и обновит своё состояние

  • Компонент <Counter> получит новое значение состояния из хранилища и перерендерится с обновлёнными данными

Итоги изученного​

Это был краткий обзор настройки и использования Redux Toolkit с React. Подведём итоги:

Итог
  • Создание хранилища Redux через configureStore
    • configureStore принимает функцию reducer как именованный аргумент
    • configureStore автоматически настраивает хранилище с оптимальными параметрами
  • Предоставление хранилища React-компонентам
    • Оберните приложение <App /> в компонент <Provider> из React-Redux
    • Передайте хранилище как <Provider store={store}>
  • Создание слайс-редюсера через createSlice
    • Вызовите createSlice с именем (строкой), начальным состоянием и именованными функциями-редюсерами
    • Редюсеры могут "мутировать" состояние благодаря Immer
    • Экспортируйте сгенерированный слайс-редюсер и создатели действий
  • Использование хуков useSelector/useDispatch в React-компонентах
    • Чтение данных из хранилища через хук useSelector
    • Получение функции dispatch через хук useDispatch и отправка действий при необходимости

Полный пример приложения-счётчика​

Полная работающая версия приложения-счётчика на CodeSandbox:

Что дальше?​

Рекомендуем пройти полный учебник «Redux Essentials», который охватывает все ключевые компоненты Redux Toolkit, решаемые ими проблемы и их применение в реальных приложениях.

Также полезно ознакомиться с учебником «Redux Fundamentals», который даст полное понимание работы Redux, функционала Redux Toolkit и правил его использования.