Что такое Redux Toolkit и зачем он нужен?

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

Ключевые особенности Redux Toolkit:

• configureStore: Упрощает создание хранилища и автоматически подключает полезные middleware (например, для работы с асинхронностью).

• createSlice: Позволяет объединить редьюсер и действия в одном месте, устраняя необходимость вручную определять типы действий.

• createAsyncThunk: Упрощает работу с асинхронными действиями, автоматически обрабатывая их состояние (загрузка, успех, ошибка).

Мемоизация и удобные инструменты: Интеграция с инструментами отладки, такими как Redux DevTools.

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

import { configureStore, createSlice } from '@reduxjs/toolkit';
// Создание среза (slice)
const todosSlice = createSlice({
	name: 'todos',
	initialState: [],
	reducers: {
		addTodo: (state, action) => {
			state.push(action.payload);
		},
		removeTodo: (state, action) => {
			return state.filter((todo) => todo.id !== action.payload);
		},
	},
});
// Экспорт действий
export const { addTodo, removeTodo } = todosSlice.actions;
// Создание хранилища
const store = configureStore({
	reducer: {
		todos: todosSlice.reducer,
	},
});
export default store;

Асинхронные действия с createAsyncThunk:

import { createAsyncThunk } from '@reduxjs/toolkit';
export const fetchTodos = createAsyncThunk('todos/fetchTodos', async () => {
	const response = await fetch('/api/todos');
	return response.json();
});

Почему Redux Toolkit полезен?

• Меньше шаблонного кода: Вы пишете только то, что важно для бизнес-логики.

• Удобство: Инструменты, такие как createSlice, автоматически обрабатывают создание действий и редьюсеров.

• Безопасность: Включает лучшие практики по умолчанию, например, использование Immer для работы с неизменяемыми состояниями.

• Интеграция: Легко работает с React, Redux DevTools и middleware.

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