Redux Toolkit
Redux Toolkit — это официальный набор инструментов для эффективной разработки с Redux, который упрощает наиболее распространённые сценарии использования Redux, включая настройку store, создание редьюсеров и иммутабельное обновление состояния.
Основные возможности Redux Toolkit
- configureStore: Упрощённая настройка store с встроенными middleware
- createSlice: Автоматическое создание actions и reducers
- createAsyncThunk: Упрощённая работа с асинхронными операциями
- createEntityAdapter: Управление нормализованными данными
Пример использования Redux Toolkit
import { createSlice, configureStore } from '@reduxjs/toolkit';
// Создание slice
const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0
},
reducers: {
increment: state => {
state.value += 1;
},
decrement: state => {
state.value -= 1;
},
incrementByAmount: (state, action) => {
state.value += action.payload;
}
}
});
// Экспорт actions
export const { increment, decrement, incrementByAmount } = counterSlice.actions;
// Создание store
const store = configureStore({
reducer: {
counter: counterSlice.reducer
}
});
Асинхронные операции с createAsyncThunk
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
// Создание асинхронного action
export const fetchUserById = createAsyncThunk(
'users/fetchByIdStatus',
async (userId, thunkAPI) => {
const response = await fetch(`/api/users/${userId}`);
return response.json();
}
);
// Slice с обработкой асинхронного состояния
const userSlice = createSlice({
name: 'user',
initialState: {
data: null,
status: 'idle',
error: null
},
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchUserById.pending, (state) => {
state.status = 'loading';
})
.addCase(fetchUserById.fulfilled, (state, action) => {
state.status = 'succeeded';
state.data = action.payload;
})
.addCase(fetchUserById.rejected, (state, action) => {
state.status = 'failed';
state.error = action.error.message;
});
}
});
Преимущества Redux Toolkit:
Redux Toolkit значительно упрощает работу с Redux, уменьшает количество шаблонного кода и предоставляет лучшие практики из коробки.