customSlice.ts

import { createSlice as createSliceToolkit } from '@reduxjs/toolkit'

export interface StateSlice<T = any> {
  data: T
  isFetching: boolean
  receivedAt: number | null
  error: boolean
  errorMessage: string | null
  errorCode: number | null
}

const requestStart = state => {
  state.isFetching = true
}

const requestSuccess = (state, { payload }) => {
  state.isFetching = false
  state.error = false
  state.data = payload
}

export const createSlice = ({
  name,
  initialState,
  reducers,
  extraReducers
}): {
  name: string
  initialState: StateSlice
  reducers?: Record<string, CaseReducer<StateSlice, AnyAction>>
  extraReducers?: Record<string, CaseReducer<StateSlice, AnyAction>>
} => {
  return createSliceToolkit({
    name,
    initialState,
    reducers: {
      requestStart,
      requestSuccess,
      ...reducers
  })
}
  
/**
 * The actions in createSlice.actions end up being typed as
 * 
 * const requestStart: void | WithTypeProperty<WithMatch<() => WithPayload<undefined, Action<string>>, string, undefined, never, never>, string> | WithTypeProperty<WithMatch<{
 *   (payload?: undefined): WithPayload<undefined, Action<string>>;
 *   <PT extends unknown>(payload?: PT | undefined): WithPayload<PT, Action<string>>;
 * }, string, unknown, never, never>, string>
 * 
 * Which results in a "This expression is not callable error"
 * 
 * createSlice.reducers doesn't really like Record<string, CaseReducer<StateSlice, AnyAction>> either
 */