Redux toolkit

Redux Toolkit — це офіційний набір інструментів для ефективної розробки з Redux, який спрощує більшість поширених випадків використання Redux, включаючи налаштування сховища, створення редюсерів та оновлення незмінного стану.

Основні функції Redux Toolkit

configureStore: Спрощене налаштування сховища з вбудованим проміжним програмним забезпеченням
createSlice: Автоматичне створення дій та редюсерів
createAsyncThunk: Спрощена робота з асинхронними операціями
createEntityAdapter: Управління нормалізованими даними

Приклад використання Redux Toolkit

javascript

import { createSlice, configureStore } from '@reduxjs/toolkit';

// Створення слайсу
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;
    }
  }
});

// Експорт дій
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// Створення сховища
const store = configureStore({
  reducer: {
    counter: counterSlice.reducer
  }
});

Асинхронні операції з createAsyncThunk

javascript

import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

// Створення асинхронної дії
export const fetchUserById = createAsyncThunk(
  'users/fetchByIdStatus',
  async (userId, thunkAPI) => {
    const response = await fetch(`/api/users/${userId}`);
    return response.json();
  }
);

// Слайс з обробкою асинхронного стану
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, зменшує обсяг шаблонного коду та надає найкращі практики з коробки.

Зміст

Основні функції Redux ToolkitПриклад використання Redux ToolkitАсинхронні операції з createAsyncThunk

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Redux toolkit

#Основні функції Redux Toolkit

#Приклад використання Redux Toolkit

#Асинхронні операції з createAsyncThunk

#Зміст

Коротка відповідь

Основні функції Redux Toolkit

Приклад використання Redux Toolkit

Асинхронні операції з createAsyncThunk

Зміст