如何在Redux Toolkit中用Redux Thunk发起POST请求并传参

createAsyncThunk原生支持接收调用时传入的参数，不需要额外改造底层逻辑，直接按下面的方式实现即可：

1. 修改Thunk函数定义，接收传入的请求参数 #

createAsyncThunk第二个参数的异步回调（payloadCreator），第一个入参就是你dispatch thunk时传入的参数，直接拿来用在POST请求配置里即可：

export const postData = createAsyncThunk("type/postData", async (params) => {
    try {
        const response = await axios({
            url: "你的POST接口地址",
            method: "POST",
            // params就是后续调用时传入的请求数据，直接作为请求体发送
            data: params
        });
        return response.data;
    } catch (error) {
        console.log(error.response);
        // 注意：这里必须抛出错误/返回rejected Promise，否则请求失败时不会进入rejected分支
        return Promise.reject(error.response);
    }
});

如果你需要同时传请求体、请求头等多组配置，直接把入参设计成对象解构即可：

export const postData = createAsyncThunk("type/postData", async ({ postData, headers }) => {
    const response = await axios({
        url: "你的POST接口地址",
        method: "POST",
        data: postData,
        headers: headers
    });
    return response.data;
});

2. 组件中调用时传入参数即可 #

在组件里dispatch这个thunk的时候，直接把POST请求需要的参数放在thunk函数的调用括号里，支持任意合法JS类型（对象、字符串、数字都可以）：

import { useDispatch } from "react-redux";
import { postData } from "./对应slice文件路径";

function DemoComponent() {
    const dispatch = useDispatch();

    const handleSubmit = () => {
        // 要提交的POST请求参数
        const submitData = {
            name: "测试商品",
            price: 99
        };
        // 直接把参数传入thunk
        dispatch(postData(submitData));

        // 如果是上面解构多参数的写法，就传对象
        // dispatch(postData({
        //     postData: submitData,
        //     headers: { "Authorization": "xxx" }
        // }))
    };

    return <button onClick={handleSubmit}>提交数据</button>
}

3. extraReducers无需额外修改 #

POST请求对应的extraReducers写法和你之前写GET请求的逻辑完全一致：

• pending状态下更新loading为true
• fulfilled状态下从action.payload拿到接口返回值更新状态、关闭loading
• rejected状态下关闭loading、标记错误状态

补充提醒：你之前GET请求的thunk里，catch块只打印了错误日志没有抛出，会导致请求失败时无法触发rejected状态，loading会一直保持true，建议补上错误抛出逻辑。

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