Весной стартует сезон найма, успей отхватить свой оффер!

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, уменьшает количество шаблонного кода и предоставляет лучшие практики из коробки.