Redux slice to track the lifecycles of redux toolkit's async thunks

async-thunk-lifecycle.ts

import {
  SerializedError,
  createSelector,
  createSlice,
  isAsyncThunkAction,
  isFulfilled,
  isPending,
  isRejected,
} from '@reduxjs/toolkit';

// import from somewhere
type AppState = {};

type AsyncThunkLifecycleStatePending = {
  status: 'pending';
};

type AsyncThunkLifecycleStateFulfilled = {
  status: 'fulfilled';
  result: unknown;
};

type AsyncThunkLifecycleStateRejected = {
  status: 'rejected';
  error: SerializedError;
};

type AsyncThunkLifecycleState =
  | AsyncThunkLifecycleStatePending
  | AsyncThunkLifecycleStateFulfilled
  | AsyncThunkLifecycleStateRejected;

type AsyncThunkLifecycleSlice = Record<string, AsyncThunkLifecycleState>;

export const asyncThunkLifecycleSlice = createSlice({
  name: 'asyncThunkLifecycle',
  initialState: {} as AsyncThunkLifecycleSlice,
  reducers: {},
  extraReducers(builder) {
    builder.addMatcher(isAsyncThunkAction, (state, action) => {
      const { requestId } = action.meta;

      if (isPending(action)) {
        state[requestId] = {
          status: 'pending',
        };
      }

      if (isFulfilled(action)) {
        state[requestId] = {
          status: 'fulfilled',
          result: action.payload,
        };
      }

      if (isRejected(action)) {
        state[requestId] = {
          status: 'rejected',
          error: action.error,
        };
      }
    });
  },
});

const selectSlice = (state: AppState) => {
  return state[asyncThunkLifecycleSlice.reducerPath];
};

const selectAsyncThunkState = createSelector(
  selectSlice,
  (state: AppState, requestId: string | undefined) => requestId,
  (slice, requestId) => {
    if (requestId) {
      return slice?.[requestId];
    }
  },
);

export const selectAsyncThunkStatus = createSelector(selectAsyncThunkState, (state) => {
  return state?.status;
});

export const selectAsyncThunkError = createSelector(selectAsyncThunkState, (state) => {
  if (state?.status === 'rejected') {
    return state?.error;
  }
});