在写项目的时候，Calculator遇到了这样的问题，给我的任务是把项目分成模块，如果需要的话，可以用其他的模块来替换，我们以API为例，API代码应该写得直观明了，怎么用其他的模块来替换。
因此，我决定键入负责API请求的函数。也许我做错了，如果你指出错误就太好了。

//./api/types.ts

export type HistoryItem = { //This is an interface of item for request, but not respond
  expression: string;
  result: string;
};

export type CalculationRequest<T> = (expression: string) => T[];
export type DeleteRequest = (id: string) => void;
export type GetAllRequest<T> = () => T[];

创建泛型的想法是API可以接受某种类型的数据作为输入并返回某种类型的数据，但在将该数据传递给状态之前，它必须是强类型的，以匹配状态的类型。
接下来，我编写了一个useApi钩子，它只检查.env，选择所需的API，并将fetch函数传递给切片。

import { defaultApi } from "@/api";
import {
  CalculationRequest,
  DeleteRequest,
  GetAllRequest,
  HistoryItem,
} from "@/api/types";

export type ApiMethods = {
  calculateExpression: CalculationRequest<HistoryItem>;
  deleteHistoryItem: DeleteRequest;
  fetchHistory: GetAllRequest<HistoryItem>;
};

type UseApiHook = () => ApiMethods;

export const useApi: UseApiHook = () => {
  if (process.env.NEXT_PUBLIC_REACT_APP_API === "default") {
    return defaultApi;
  } else {
    throw new Error("API was not found!");
  }
};

在切片中，我将获取函数 Package 在createAsyncThunk中并编写它们的功能。

const fetchHistory = createAsyncThunk(
  "history/get",
  api.fetchHistory
);
const deleteHistoryItem = createAsyncThunk(
  "history/delete",
  api.deleteHistoryItem
);
const calculateExpression = createAsyncThunk(
  "calculator/get",
  api.calculateExpression
);

const maxNumberOfHistoryItems = 10;

const initialState: CalculatorHistoryState = {
  history: [],
  inputValue: "0",
  fetchError: null,
  status: "idle",
};

const calculatorHistorySlice = createSlice({
  name: "history",
  initialState,
  reducers: {
    addItemToState(state, action) {
      const updatedHistory = [action.payload, ...state.history];
      if (updatedHistory.length < maxNumberOfHistoryItems) {
        return { ...state, history: updatedHistory };
      }
      return {
        ...state,
        history: updatedHistory.slice(0, maxNumberOfHistoryItems),
      };
    },

    removeFromState(state, action) {
      const filteredHistory = state.history.filter((item) => {
        return item._id != action.payload;
      });
      return { ...state, history: filteredHistory };
    },

    setItemToInput(state, action) {
      return { ...state, inputValue: action.payload };
    },
  },
  extraReducers(builder) {
    builder.addCase(HYDRATE, (state, _action) => {
      return {
        ...state,
        // ...action.payload.subject,
      };
    });

    builder.addCase(fetchHistory.fulfilled, (state, { payload }) => {
      state.history = [...payload];
      state.status = "idle";
    });

    builder.addCase(calculateExpression.fulfilled, (state, _action) => {
      return state;
    });

    builder.addCase(deleteHistoryItem.fulfilled, (state, action) => {
      state.history.filter((item) => item._id != action.payload);
    });

    builder.addCase(deleteHistoryItem.rejected, (state, action) => {
      console.log(action);
      return state;
    });
  },
});

问题是我想把来自createAsyncThunk请求的数据进行类型化，比如更换API时，返回的数据类型可能会发生变化，但在进入状态之前，必须按照国家标准对数据进行格式化，这样以后才不会出错，直观上也容易理解。

export interface StateItem {
  expression: string;
  result: string;
  _id: string;
  __v?: string;
}

在代码中的什么地方应该为从API返回的状态指定数据类型？