Руководство по использованию Redux Toolkit в React

Redux Toolkit – это официальное рекомендуемое средство для работы с Redux в приложениях React. Оно предоставляет упрощенные API и инструменты, которые значительно упрощают и ускоряют разработку на основе Redux.

Redux Toolkit объединяет в себе все основные функции Redux, такие как хранилище (store), действия (actions) и редьюсеры (reducers), и предлагает более простой способ создания и работы с ними. Он также включает в себя набор утилит для организации кода, управления состоянием и облегчения разработки.

В этой статье мы рассмотрим основные преимущества Redux Toolkit и научимся использовать его в приложениях React. Мы узнаем, как настроить проект, описывать состояние с помощью срезов (slices) и действий (actions), и как связывать компоненты с Redux-хранилищем.

Если вы уже знакомы с базовыми концепциями Redux, то Redux Toolkit станет отличным инструментом, который упростит и ускорит вашу разработку React-приложений. Давайте начнем!

Установка и настройка Redux Toolkit

Первым шагом является установка Redux Toolkit. Для этого необходимо открыть командную строку или терминал и выполнить команду:

npm install @reduxjs/toolkit

После установки Redux Toolkit, необходимо правильно настроить его в вашем приложении на React. Для этого вам понадобится создать файл конфигурации для Redux Toolkit. В этом файле вы будете настраивать основные параметры и создавать вашу стор (store).

В файле конфигурации Redux Toolkit, который называется store.js или configureStore.js, необходимо выполнить следующие шаги:

1. Импортировать функцию configureStore из библиотеки Redux Toolkit
2. Импортировать ваши собственные редьюсеры (reducers) и миддлвары (middlewares)
3. Создать и экспортировать стор, используя функцию configureStore и передавая в нее ваши редьюсеры и миддлвары

Пример кода файла конфигурации Redux Toolkit:

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

Создание стора с помощью Redux Toolkit

Для начала работы с Redux Toolkit необходимо установить пакет с помощью команды:

npm install @reduxjs/toolkit

После установки пакета можно приступить к созданию стора с помощью Redux Toolkit. Для этого следует использовать функцию configureStore(), которая позволяет объединить редюсеры, применить middleware и настроить другие параметры стора.

Пример создания стора с помощью Redux Toolkit:

import { configureStore } from '@reduxjs/toolkit';import counterReducer from './counter/counterSlice';import todosReducer from './todos/todosSlice';const store = configureStore({reducer: {counter: counterReducer,todos: todosReducer}});export default store;

В приведенном примере мы импортируем функцию configureStore, а также редюсеры counterReducer и todosReducer из соответствующих файлов. Затем мы вызываем функцию configureStore и передаем ей объект с ключом reducer, в котором указываем все редюсеры, которые мы хотим добавить в стор. В нашем случае мы добавляем два редюсера — counter и todos.

После создания стора с помощью Redux Toolkit мы можем использовать его в нашем приложении, подключив его с помощью компонента Provider из пакета react-redux.

import React from 'react';import { Provider } from 'react-redux';import store from './store';const App = () => {return (<Provider store={store}><!-- Здесь располагается остальной код вашего приложения --></Provider>);};export default App;

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

Определение состояния с помощью createSlice

Процесс создания среза состоит из трех основных шагов:

1. Определение начального состояния.
2. Определение редюсеров.
3. Определение действий.

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

Пример использования createSlice:

import { createSlice } from '@reduxjs/toolkit';const counterSlice = createSlice({name: 'counter',initialState: 0,reducers: {increment: state => state + 1,decrement: state => state - 1}});const { actions, reducer } = counterSlice;export const { increment, decrement } = actions;export default reducer;

В этом примере мы создали срез состояния с именем ‘counter’ и начальным значением 0. Затем мы определили редюсеры increment и decrement, которые изменяют состояние счетчика. createSlice автоматически сгенерирует соответствующие действия и типы действий, что позволяет просто импортировать и использовать их в компонентах.

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

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

Добавление действий с помощью createSlice

Для начала нужно импортировать необходимые функции из библиотеки:

Затем нужно определить начальное состояние среза:

const initialState = {count: 0,};

Далее можно создать срез данных с помощью функции createSlice:

const counterSlice = createSlice({name: 'counter',initialState,reducers: {increment(state) {state.count += 1;},decrement(state) {state.count -= 1;},},});

В данном примере мы создаем срез данных counterSlice с именем «counter» и начальным состоянием initialState. Внутри среза определяются действия increment и decrement, которые изменяют значение count.

Чтобы использовать срез данных и эти действия в компоненте, необходимо экспортировать их:

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

Теперь мы можем импортировать действия в компонент и использовать их:

import { increment, decrement } from './counterSlice';import { useDispatch, useSelector } from 'react-redux';function Counter() {const count = useSelector((state) => state.counter.count);const dispatch = useDispatch();return (<div><p>Count: {count}</p><button onClick={() => dispatch(increment())}>+1</button><button onClick={() => dispatch(decrement())}>-1</button></div>);}

В данном компоненте мы используем хук useSelector для получения значения count из среза данных counter. Затем мы используем хук useDispatch для получения функции dispatch, с помощью которой мы вызываем действия increment и decrement при нажатии на кнопки.

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

Обновление состояния с помощью действий

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

const counterSlice = createSlice({name: 'counter',initialState: 0,reducers: {increment: state => state + 1,decrement: state => state - 1,},})const { actions, reducer } = counterSliceexport const { increment, decrement } = actions

В этом примере мы создаем срез состояния с именем «counter» и начальным значением 0. Затем мы определяем два действия — increment (увеличение) и decrement (уменьшение), которые будут обновлять состояние счетчика.

Чтобы использовать эти действия, мы можем импортировать их в компонент React и использовать в обработчиках событий. Например, в кнопке увеличения мы можем вызвать действие increment следующим образом:

import React from 'react'import { useDispatch } from 'react-redux'import { increment } from './counterSlice'const Counter = () => {const dispatch = useDispatch()const handleIncrement = () => {dispatch(increment())}return (Увеличить)}export default Counter

В этом примере мы используем хук useDispatch из react-redux для получения доступа к функции dispatch, которая позволяет отправлять действия в Redux Store. Затем мы создаем обработчик события handleIncrement, который вызывает действие increment и отправляет его в Redux Store.

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

Использование селекторов для доступа к состоянию

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

Для использования селекторов нужно воспользоваться функцией createSelector из пакета @reduxjs/toolkit. Эта функция получает на вход один или несколько селекторов и функцию-трансформер, которая принимает значения выбранных селекторов и возвращает необходимый результат.

Допустим, у нас есть состояние хранилища, содержащее список пользователей. Хотим отфильтровать пользователей, чьи имена начинаются с буквы «А». Создадим селектор для этой операции:

import { createSelector } from '@reduxjs/toolkit';const usersSelector = (state) => state.users;const filteredUsersSelector = createSelector(usersSelector,(users) => users.filter((user) => user.name.startsWith('A')));

Теперь мы можем использовать filteredUsersSelector для получения отфильтрованного списка пользователей:

const filteredUsers = useSelector(filteredUsersSelector);

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

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

Использование селекторов является одним из способов сделать работу с Redux более эффективной, модульной и легкой в поддержке. Они позволяют абстрагироваться от структуры состояния и создавать компактные и понятные селекторы для доступа к нужным данным.

Изменение состояния с помощью createAsyncThunk

Когда мы используем createAsyncThunk, мы передаем ей два аргумента: название сценария и функцию, которая выполняет асинхронную операцию. Функция должна возвращать промис, который разрешается с данными, когда операция завершена.

Вот пример того, как мы можем использовать createAsyncThunk для получения данных из API:


import { createAsyncThunk } from '@reduxjs/toolkit';
import { fetchData } from '../api';
export const fetchUserData = createAsyncThunk(
'user/fetchUserData',
async (userId) => {
const response = await fetchData(userId);
return response.data;
}
);


Здесь мы создаем асинхронное действие fetchUserData с помощью createAsyncThunk. Второй аргумент функции — это асинхронная функция, которая вызывает fetchData для получения данных из API. Мы возвращаем данные, полученные от API.

Когда мы вызываем fetchUserData из компонента, Redux Toolkit автоматически обрабатывает различные состояния действия. В нашем случае, когда операция начинается, действие fetchUserData.pending будет запущено и мы можем показать индикатор загрузки. Когда операция успешно завершена, действие fetchUserData.fulfilled будет вызвано с полученными данными. Если возникает ошибка, будет вызвано действие fetchUserData.rejected, и мы можем обработать ее соответствующим образом.

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

Комбинирование нескольких срезов состояния

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

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

К примеру, у нас есть два среза состояния: users и posts. Мы хотим получить список всех пользователей, которые написали хотя бы один пост. Можем использовать комбинацию селекторов:

import { createSelector } from '@reduxjs/toolkit';const selectUsers = state => state.users;const selectPosts = state => state.posts;const selectUsersWithPosts = createSelector(selectUsers,selectPosts,(users, posts) => {return users.filter(user => {return posts.some(post => post.authorId === user.id);});});

Теперь, вызывая selectUsersWithPosts, мы получим список пользователей, у которых есть хотя бы один пост.

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

Отладка Redux Toolkit с помощью Redux DevTools

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

В этой вкладке вы сможете просматривать историю изменений состояния, отменять и восстанавливать действия, а также анализировать производительность вашего приложения.

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

Кроме того, Redux DevTools предоставляет возможность добавлять расширения и настраивать их поведение, чтобы удовлетворить ваши потребности отладки.

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