При работе с Redux Toolkit инициализация исходного состояния вашего хранилища Redux является важным шагом. В некоторых случаях вам может потребоваться сначала установить пустое начальное состояние, чтобы ваше приложение могло динамически заполнять это состояние. В этой статье мы обсудим несколько способов добиться этого в Redux Toolkit, а также приведем примеры кода.

Метод 1: определение пустого объекта
Один из простых подходов — определить пустой объект в качестве начального состояния. Это можно сделать в поле initialStateвашего фрагмента, например:

import { createSlice } from '@reduxjs/toolkit';
const slice = createSlice({
  name: 'mySlice',
  initialState: {},
  reducers: {
    // ... your slice's reducers
  },
});
export const { actions, reducer } = slice;

Метод 2: использование createAsyncThunkи extraReducers
Если вы используете асинхронные действия с createAsyncThunkи extraReducers, вы можете установить пустое начальное состояние с помощью действия pending. Вот пример:

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
const fetchItems = createAsyncThunk('mySlice/fetchItems', async () => {
  // ... fetch items logic
});
const slice = createSlice({
  name: 'mySlice',
  initialState: {
    items: [],
    status: 'idle',
    error: null,
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchItems.pending, (state) => {
        state.status = 'loading';
      })
      // ... handle other actions
  },
});
export const { actions, reducer } = slice;

Метод 3: использование configureStoreи preloadedState
Если вы используете configureStoreдля настройки хранилища Redux, вы можете пройти пустой объект в качестве параметра preloadedState. Вот пример:

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';
const store = configureStore({
  reducer: rootReducer,
  preloadedState: {},
});
export default store;

Установить пустое начальное состояние в Redux Toolkit можно различными способами. Используя пустой объект, используя createAsyncThunkи extraReducersили передавая пустой объект configureStore, вы можете начать с чистого состояния и динамически заполнять это по мере продвижения вашего приложения.