Thunks

Асинхронный экшен

Thunk. Effect. В них можно обрабатывать ответы с сервера и обогащать данные дополнительными полями.

dispatch indise component --> thunk --> get API data --> modified data --> save data to store

import axios from 'axios';
import { TUser } from './users.types';
import { Dispatch } from '@reduxjs/toolkit';
import { usersSlice } from './users.slice';

const { usersLoading, usersSuccess, usersError, resetUsersState } =
  usersSlice.actions;

export const fetchUsersThunk =
  (limit: number) => async (dispatch: Dispatch) => {
    dispatch(resetUsersState());
    dispatch(usersLoading(true));

    try {
      // response typing
      const response = await axios.get<TUser[]>(
        `https://jsonplaceholder.typicode.com/users?limit=${limit}`,
      );

      // if success
      setTimeout(() => {
        dispatch(usersLoading(false));
        dispatch(usersSuccess(response.data));
      }, 1000);

      // if error
    } catch (e) {
      dispatch(usersLoading(false));
      dispatch(usersError(`${e}`));
    }
  };

// или экспортом в объекте
export const usersThunks = {
  fetchUsersThunk,
};

---

Использование в компоненте

import { useDispatch, useSelector } from 'react-redux';
import { fetchUsersThunk } from '@store/users';

const SomeComp = () => {
  const dispatch = useDispatch();
  const users = useSelector((state: AppState) => state.users);

  useEffect(() => {
    dispatch(fetchUsersThunk(10));
  }, []);

  const { isFetching, error, userList } = users;

  // render users
  ...
};

export default SomeComp;

---

Пример thunk

import { Dispatch } from 'redux';
import { store } from '../store/store';
import routesService from '../api/services/routes-service';
import { setLoadingAction } from '../slices/orders';

export const attachReturnsToPickups = (routeIds: number[]) => {
  return async function (dispatch: Dispatch<any>) {
    dispatch(setLoadingAction(true));

    const data = await routesService.attachReturnsToPickups(routeIds);
    if (data) {
      // доступ к стору
      const filters = store.getState().orders.filters;
      store.dispatch(getAllRoutes());
      store.dispatch(getAllOrders());
      dispatch(
        messageAction(
          messageHandler(
            'Партнёрские возвраты успешно обработаны',
            MessageType.SUCCESS,
          ),
        ),
      );
    } else {
      dispatch(setLoadingAction(false));
      dispatch(
        messageAction(
          messageHandler('Не удалось обработать партнёрские возвраты'),
        ),
      );
    }
  };
};

---

Примеры синхронных экшенов

// обновление данных в массиве
setDrugstoreTypeFilter(state, { payload }: PayloadAction<DrugstoreType>) {
  const { drugstoreType } = state.filter;

  const isInclude = drugstoreType.includes(payload);

  if (isInclude) {
    state.filter.drugstoreType = drugstoreType.filter(
      type => type !== payload,
    );
  } else {
    state.filter.drugstoreType = [...drugstoreType, payload];
  }
},

// обновление данных в массиве, если payload тоже массив
setOwnDrugstoreTypeFilter(state, { payload }: PayloadAction<PickUpType[]>) {
  const { ownDrugstoreType } = state.filter;

  payload.map(type => {
    const isExist = ownDrugstoreType.some(
      currentType => currentType === type,
    );

    if (isExist) {
      // удалить фильтр
      const index = ownDrugstoreType.indexOf(type);
      ownDrugstoreType.splice(index, 1);
    } else {
      // добавить фильтр
      ownDrugstoreType.push(type);
    }
  });
},

---

Утилиты

import { PayloadAction } from '@reduxjs/toolkit';
export type ObjectType = Record<string, unknown>;

// simpleMerge
export const simpleMerge = <State, Payload>(
  state: State,
  action: PayloadAction<Payload>,
): State => ({
  ...state,
  ...action.payload,
});

// simpleMergeThunk
export const simpleMergeThunk =
  <State, Payload>() =>
  (state: State, action: PayloadAction<Payload>): State => ({
    ...state,
    ...action.payload,
  });

// createPayload
export const createPayload = <Payload extends ObjectType>(
  payload: Payload,
) => ({
  payload: payload,
});

// createSimpleReducer
export const createSimpleReducer =
  <State, K extends keyof State>(key: K) =>
  (state: State, action: PayloadAction<State[K]>) => ({
    ...state,
    [key]: action.payload,
  });

// createSimpleDraftReducer
export const createSimpleDraftReducer =
  <State, K extends keyof State>(key: K) =>
  (state: State, action: PayloadAction<State[K]>) => {
    state[key] = action.payload;
  };

// createMergeReducer
export const createMergeReducer = <State>() =>
  simpleMergeThunk<State, Partial<State>>();

// createMergeDraftReducer
export const createMergeDraftReducer =
  <State, K extends keyof State>(key: K) =>
  (state: State, action: PayloadAction<State[K]>) => {
    state[key] = {
      ...state[key],
      ...action.payload,
    };
  };

---

Обработка ответа после dispatch

const syncGoTemplatesHandler = async () => {
  const result = (await dispatch(syncGoTemplates())) as unknown as boolean;

  if (result) {
    setSuccess('Успешно');
  } else {
    setSuccess('Произошла ошибка');
  }
};

---

Обработка ответа после dispatch 2

// thunk, который возвращает данные
export const setSlaInterval = (slaId: number, intervalData: ISlaInterval) => {
  return async function (dispatch: Dispatch<any>): Promise<FormError[] | ISlaInterval | undefined> {
    dispatch(setLoadingAction(true));
    const response = !intervalData.id
      ? await slaService.createInterval(slaId, intervalData)
      : await slaService.editInterval(slaId, intervalData);
    if (response.success) {
      await dispatch(setLoadingAction(false));
      return response.data;
    } else {
      await dispatch(
        setMessageAction(messageHandler('Возникла ошибка при попытке сохранить интервал', MessageType.ERROR))
      );
      await dispatch(setLoadingAction(false));
      if (response.errors) {
        return response.errors;
      }
    }
  };
};

...

// экшен с обработкой ответа внутри компонента
  const saveInterval = async (
    slaInWork: ISla,
    intervalInWork: ISlaInterval,
    setSlaInWork: (data: ISla) => void,
    originalSla: ISla,
    setOriginalSla: (data: ISla) => void
  ) => {
    const responseInterval = (await dispatch(setSlaInterval(slaInWork.id, intervalInWork))) as unknown as
      | FormError[]
      | ISlaInterval
      | undefined;

    if (responseInterval) {
      const data = responseInterval as ISlaInterval;

      if (data.id) {
        const iId = intervalInWork.id;

        setSlaInWork({
          ...slaInWork,
          intervals: slaInWork.intervals.map((interval) => {
            return interval.uniqId !== intervalInWork.uniqId
              ? interval
              : {
                  ...data,
                  uniqId: intervalInWork.uniqId,
                };
          }),
        });

        setOriginalSla({
          ...originalSla,
          intervals: !iId
            ? [
                ...originalSla.intervals,
                {
                  ...data,
                  uniqId: intervalInWork.uniqId,
                },
              ]
            : [
                ...originalSla.intervals.map((interval) => {
                  return interval.uniqId !== intervalInWork.uniqId
                    ? interval
                    : {
                        ...data,
                        uniqId: intervalInWork.uniqId,
                      };
                }),
              ],
        });

        setErrors([]);
      }

      if (Array.isArray(responseInterval)) {
        setErrors(responseInterval);
      }
    }
  };

---

Обработка ответа после dispatch 3

const handleSuspend = async () => {
  const newErrors = (await dispatch(hubSuspend(time, search))) as unknown as FormError[];

  if (!newErrors) {
    close();
  } else {
    setErrors(newErrors || []);
  }
};