如何用RTK的prepare格式改写Reducer以解决TS类型错误？

要解决这个TS类型错误，你需要给getAllOrders action配置prepare函数，同时显式定义payload和meta的类型，让TypeScript能正确识别action的结构。

步骤1：定义Action的Payload和Meta类型 #

首先明确你的订单数据类型，以及meta字段的结构：

// 替换成你实际的订单类型定义
type Order = {
  id: string;
  // 其他订单字段...
};

interface GetAllOrdersPayload {
  orders: Order[];
}

interface GetAllOrdersMeta {
  status?: 'completed' | string;
}

步骤2：用prepare语法改写Reducer #

在你的Slice定义中，把getAllOrders改成包含reducer和prepare的对象结构：

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

// ... 你的state类型定义 ...

const ordersSlice = createSlice({
  name: 'orders',
  initialState: {
    orders: [] as Order[],
    allLoaded: false
  },
  reducers: {
    getAllOrders: {
      reducer(state, action: PayloadAction<GetAllOrdersPayload, string, GetAllOrdersMeta>) {
        state.orders = action.payload.orders;

        // 用可选链简化判断，同时TS能正确识别meta属性
        if (action.meta?.status === 'completed') {
          state.allLoaded = true;
        }
      },
      // prepare函数负责组装action的payload和meta
      prepare(payload: GetAllOrdersPayload, meta: GetAllOrdersMeta) {
        return { payload, meta };
      }
    }
  }
});

// 导出action creator供组件使用
export const { getAllOrders } = ordersSlice.actions;

使用方式 #

在组件中dispatch这个action时，可以传入payload和meta参数：

dispatch(getAllOrders(
  { orders: fetchedOrders }, 
  { status: 'completed' }
));

这样TypeScript就能正确识别action.meta的存在，不会再抛出TS2339错误。

内容的提问来源于stack exchange，提问作者Wasteland