Введение
Redux стал популярным решением для управления состоянием для многих разработчиков React, но его стандартная природа иногда может быть сложной. Библиотека Redux Toolkit призвана сделать разработку Redux более простой и приятной за счет внедрения современных методов и упрощения общих задач. В этом сообщении блога мы познакомим вас с ключевыми концепциями и преимуществами Redux Toolkit и покажем, как начать работу с примерами кода.
Что такое Redux Toolkit?
Redux Toolkit — это официальный, самоуверенный набор инструментов с батарейным питанием для эффективной разработки Redux. Он направлен на упрощение рабочего процесса Redux за счет предоставления служебных функций и абстракций, которые сокращают шаблонный код, продвигают лучшие практики и улучшают опыт разработчиков.
К основным функциям Redux Toolkit относятся:
- Предварительно настроенная настройка магазина
- Упрощенное действие и создание редуктора с помощью
createSlice - Встроенная обработка асинхронных действий с помощью
createAsyncThunk - Неизменяемость через библиотеку Immer
Настройка проекта Redux Toolkit
Чтобы начать работу с Redux Toolkit, сначала установите необходимые зависимости:
npm install @reduxjs/toolkit react-redux
Далее создайте хранилище с помощью функции configureStore:
// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
const store = configureStore({
reducer: {},
});
export default store;
Создание среза
«Срез» представляет собой часть глобального состояния и объединяет редьюсер с соответствующими действиями. Используйте функцию createSlice для создания среза.
// src/features/counter/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment: (state) => {
state.value += 1;
},
decrement: (state) => {
state.value -= 1;
},
},
});
export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;
Зарегистрируйте слайс в магазине:
// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
const store = configureStore({
reducer: {
counter: counterReducer,
},
});
export default store;
Асинхронные действия с createAsyncThunk
Redux Toolkit упрощает обработку асинхронных действий с помощью createAsyncThunk. Эта утилита автоматически создает создателей действий и обрабатывает различные типы действий для ожидающих, выполненных и отклоненных состояний.
// src/features/data/dataSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import api from '../../api';
export const fetchData = createAsyncThunk('data/fetchData', async () => {
const response = await api.fetchData();
return response.data;
});
const dataSlice = createSlice({
name: 'data',
initialState: { data: [], status: 'idle', error: null },
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchData.pending, (state) => {
state.status = 'loading';
})
.addCase(fetchData.fulfilled, (state, action) => {
state.status = 'succeeded';
state.data = action.payload;
})
.addCase(fetchData.rejected, (state, action) => {
state.status = 'failed';
state.error = action.error.message;
});
},
});
export default dataSlice.reducer;
Добавьте редуктор данных в хранилище:
// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';
import dataReducer from '../features/data/dataSlice';
const store = configureStore({
reducer: {
counter: counterReducer,
data: dataReducer,
},
});
export default store;
useSelector и useDispatch Hooks
Хуки useSelector и useDispatch из react-redux позволяют более просто взаимодействовать с магазином.
// src/features/counter/Counter.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './counterSlice';
const Counter = () => {
const count = useSelector((state) => state.counter.value);
const dispatch = useDispatch();
return (
<div>
<h1>{count}</h1>
<button onClick={() => dispatch(increment())}>Increment</button>
<button onClick={() => dispatch(decrement())}>Decrement</button>
</div>
);
};
export default Counter;
Заключение
Redux Toolkit упрощает разработку Redux, предоставляя современные методы и служебные функции, которые сокращают стандартный код. Освоив Redux Toolkit, вы сможете создавать эффективные и удобные в обслуживании решения для управления состоянием ваших приложений React.
- Официальная документация Redux Toolkit
- Учебное пособие по Redux Essentials
- Документация по хукам React-Redux
