如何在原生JavaScript文件中调用Redux Toolkit Query的Mutation端点？

你的现有代码存在的问题 #

你当前的写法有误：apiSlice.endpoints.placeMyOrder.initiate()不能提前调用后再传递参数，initiate()方法需要直接接收mutation所需的参数，并且要结合Redux store的dispatch方法才能触发请求。

正确实现步骤 #

1. 确保你的原生JS文件能访问到Redux store实例（需提前导出store）
2. 通过store.dispatch触发mutation，并在initiate()中传入请求参数

修正后的代码示例 #

import { apiSlice } from "apiHelpers/ApiSlice";
import store from "./path/to/your/store"; // 替换为你的store实际路径

export const PLACE_order = async (orderobj) => {
  // 触发mutation请求：将参数传入initiate，并用store.dispatch执行
  const mutationResult = await store.dispatch(
    apiSlice.endpoints.placeMyOrder.initiate(orderobj)
  );

  if (mutationResult.data) {
    // 处理请求成功的逻辑
    console.log("订单提交成功", mutationResult.data);
  } else {
    // 处理请求失败的逻辑
    console.error("订单提交失败", mutationResult.error);
    return;
  }
};

关键说明 #

• initiate()是RTK Query用来创建mutation action的方法，必须传入请求所需的参数，返回的action需要通过store.dispatch来执行
• 可以通过mutationResult的data、error、isSuccess、isError等属性判断请求状态
• 如果是在React组件内，通常使用useMutation hook，但原生JS环境下必须依赖store实例来dispatch action

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