Слайсы

Синхронный slice

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

type TState = {
  isLoading: boolean;
  isSuccess: boolean;
  errorMessage: boolean;
  data: TDataItem[];
};

// initialState
const initialState: TState = {
  isLoading: false,
  isSuccess: false,
  errorMessage: false,
  data: [],
};

// someSlice
const someSlice = createSlice({
  name: 'some-slice',
  initialState,
  reducers: {
    // setLoading - полная запись
    setLoading: (state, { payload }: PayloadAction<boolean>) => {
      return {
        ...state,
        isLoading: payload,
      };
    },

    // setLoading - короткая запись (в RTK state мутабильный)
    setLoading(state, { payload }: PayloadAction<boolean>) {
      state.isLoading = payload;
    },

    // setSuccess
    setSuccess(state, { payload }: PayloadAction<boolean>) {
      state.isLoading = payload;
    },

    // resetErrorMessage
    resetErrorMessage(state) {
      state.errorMessage = initialState.isError;
    },

    // setData
    setData(state, { payload }: PayloadAction<TDataItem[]>) {
      state.data = payload;
    },
  },
});

// imports
export const someReducer = someSlice.reducer;
export const { setLoading, setSuccess, resetErrorMessage, setData } =
  someSlice.actions;

---

Асинхронный slice (createApi)

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { IProduct } from './api.types';

export const api = createApi({
  // uniq key
  reducerPath: 'api',

  // api url RTK Query
  baseQuery: fetchBaseQuery({ baseUrl: 'https://fakestoreapi.com' }),

  // все запросы здесь
  endpoints: builder => ({
    // number for limit
    getProducts: builder.query<IProduct[], number>({
      query: (limit = 5) => `products?limit=${limit}`, // endpoint {baseUrl}/products
    }),

    // getPosts: builder.query({
    //   query: () => '/posts',
    // }),

    // other request any params
    // getPokemonByName: builder.query<IPokemon, string>({
    //   query: name => `pokemon/${name}`,
    // }),

    // addNewPost: builder.mutation({
    //   query: (payload) => ({
    //     url: '/posts',
    //     method: 'POST',
    //     body: payload,
    //     headers: {
    //       'Content-type': 'application/json; charset=UTF-8',
    //     },
    //   }),
    //   // invalidatesTags: ['Post'],
    // }),
  }),
});

// магия toolkit (автогенерация)  хук, который содержит все запросы
export const {
  useGetProductsQuery, // data, isLoading, isError - хук содержит параметры
  // useGetPokemonByNameQuery,
} = api;

Использование хука из createApi

import { useGetProductsQuery } from '@/store/redux-toolkit/api/api';

...

const { data, isLoading } = useGetProductsQuery(5);

---

Пример слайса с встроенными асинхронными экшенами

// src/store/ordersSearch/ordersSearchSlice.ts copy
import { toast } from 'react-toastify';
import { RootState } from '@store/index';
import { PayloadAction, createAsyncThunk, createSlice } from '@reduxjs/toolkit';
import { defaultNetworkErrorMsg } from '@constants/errorMessages';

// getNotificationTemplates request
import {
  INotificationTemplatesArgs,
  INotificationTemplatesResponse,
  getNotificationTemplates,
} from '@api/methods/getNotificationTemplates';
import {
  EMPTY_RESULT_DISPLAY_MESSAGE,
  NOTIFICATION_TEMPLATES_INITIAL_STATE,
} from './consts';
import { INotificationTemplate } from './types';

// get template list
export const fetchNotificationTemplates = createAsyncThunk<
  INotificationTemplatesResponse,
  INotificationTemplatesArgs,
  { rejectValue: string }
>(
  'notificationTemplates/fetchTemplates',
  async (args, { getState, requestId, rejectWithValue }) => {
    const { currentRequestId, isLoading } = (getState() as RootState)
      .notificationTemplates;

    if (!isLoading || requestId !== currentRequestId) {
      return rejectWithValue('Запрос уже выполняется');
    }

    const result: INotificationTemplatesResponse =
      await getNotificationTemplates(args);

    if (!result.ok) {
      toast.error(
        `Невозможно выполнить запрос шаблонов нотификаций ${result.error?.validation}`,
      );
      return rejectWithValue(
        result.error?.message_code ||
          'Невозможно выполнить запрос шаблонов нотификаций',
      );
    }
    return result;
  },
);

export const notificationTemplatesSlice = createSlice({
  name: 'notificationTemplates',
  initialState: NOTIFICATION_TEMPLATES_INITIAL_STATE,

  // синхронные экшены
  reducers: {
    setLoading(state, { payload }: PayloadAction<boolean>) {
      state.isLoading = payload;
    },
    setError(state, { payload }: PayloadAction<string>) {
      state.error = payload;
    },

    // set templates
    setTemplates(state, { payload }: PayloadAction<INotificationTemplate[]>) {
      state.templates = payload;
    },

    // select template
    setSelectedTemplate(
      state,
      { payload }: PayloadAction<INotificationTemplate | null>,
    ) {
      state.selectedTemplate = payload;
    },

    // search string
    setSearchString(state, { payload }: PayloadAction<string>) {
      state.searchString = payload;
    },

    // search string
    setSearchSuggestions(state, { payload }: PayloadAction<string[]>) {
      state.searchSuggestions = payload;
    },
  },

  extraReducers: builder => {
    // fetchNotificationTemplates - isLoading
    builder.addCase(fetchNotificationTemplates.pending, (state, { meta }) => {
      return {
        ...state,
        currentRequestId: meta.requestId,
        isLoading: true,
        error: null,
        emptyResultDisplayMessage: null,
      };
    }),
      // fetchNotificationTemplates - isSuccess
      builder.addCase(
        fetchNotificationTemplates.fulfilled,
        (state, { payload, meta }) => {
          if (meta.requestId !== state.currentRequestId) return state;

          return {
            ...state,
            currentRequestId: null,
            isLoading: false,
            error: null,
            templates: payload.data?.notification_template || [],
            emptyResultDisplayMessage: !payload.data?.notification_template
              .length
              ? EMPTY_RESULT_DISPLAY_MESSAGE
              : null,
          };
        },
      ),
      // fetchNotificationTemplates - isError
      builder.addCase(
        fetchNotificationTemplates.rejected,
        (state, { payload, error }) => {
          return {
            ...state,
            currentRequestId: null,
            isLoading: false,
            error: payload || error.message || defaultNetworkErrorMsg,
          };
        },
      );
  },
});

// export actions
const {
  setLoading,
  setError,
  setTemplates,
  setSelectedTemplate,
  setSearchString,
  setSearchSuggestions,
} = notificationTemplatesSlice.actions;
export {
  setLoading,
  setError,
  setTemplates,
  setSelectedTemplate,
  setSearchString,
  setSearchSuggestions,
};

// export reducer
export default notificationTemplatesSlice.reducer;