如何在Redux Toolkit中实现带请求头的POST API请求

你原有原生Axios的请求逻辑不需要做任何改动，直接嵌入Redux Toolkit的异步thunk即可，完整实现如下：

1. 定义异步请求与状态切片 #

直接复用你已有的请求参数、请求头配置，保证请求行为完全一致：

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

// 异步请求逻辑，完全对齐原有Axios调用
export const submitRegister = createAsyncThunk(
  'auth/leadRegister',
  async (submitData, { rejectWithValue }) => {
    // 原有请求体逻辑，如果需要动态传参可以替换下面写死的字段值
    const data = JSON.stringify({
      "RegisterOnlyNewLead": true,
      "LeadFields": [
        {
          "Attribute": "mx_Portal_Confirm_Password",
          "Value": "Samplepassword12345"
        },
        {
          "Attribute": "mx_Portal_Password",
          "Value": "Samplepassword12345"
        },
        {
          "Attribute": "EmailAddress",
          "Value": "johnwick1263@example.com"
        }
      ]
    });

    // 原有Axios配置一字不动
    const config = {
      method: 'post',
      url: 'https://portalapi.leadsquared.com/api/Authentication/Register?accessKey=u$rab680a72fbd14b1b1cb91a7a91b2c330&secretKey=d39dc85211959db0115594530c07a8268243f937',
      headers: {
        'Authorization': 'eUxOeEVXLytCSFh4RHVrNk4ySDhsS3U1TVVOMG44a0dIdGJwQ0c3T1NRbHlvNmczM0tLV0VYK3NrNEJ1Yi9adGo0TWdPK1hRWEJnMU5GRE9rbnIvbGxiNGJ4aUlwdzByMWU3VHB6enF5bUlmc2UxTUJpRUVUdUxNV083VFpMTXptUVVkNXpZMXIzbEt1U2tBODdwVm9BRUY0NmpyeDVWYkxGTzhXOUtHaXpnN0l5em5WNTc5eXZBRVFZajYvRmhrSXpGa0YwK3VIWEtYWUpwR2w1QzJDUT09',
        'Content-Type': 'application/json'
      },
      data: data
    };

    try {
      const res = await axios(config);
      // 对齐原有then逻辑，返回响应数据
      console.log(JSON.stringify(res.data));
      return res.data;
    } catch (err) {
      // 对齐原有catch逻辑，返回错误信息
      console.log(err);
      return rejectWithValue(err.response?.data || err.message);
    }
  }
);

// 状态切片，管理请求加载状态、返回结果、错误信息
const authSlice = createSlice({
  name: 'auth',
  initialState: {
    registerRes: null,
    loading: false,
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(submitRegister.pending, (state) => {
        state.loading = true;
        state.error = null;
      })
      .addCase(submitRegister.fulfilled, (state, action) => {
        state.loading = false;
        state.registerRes = action.payload;
      })
      .addCase(submitRegister.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload;
      });
  }
});

export default authSlice.reducer;

2. 配置Store #

把上面的切片reducer加入Redux Store配置，和你之前配置普通Redux reducer的方式没有区别：

import { configureStore } from '@reduxjs/toolkit';
import authReducer from './authSlice'; // 替换成你自己的文件路径

export const store = configureStore({
  reducer: {
    auth: authReducer,
    // 其他业务reducer正常添加即可
  }
});

3. 组件中调用 #

在React组件中通过hook触发请求、读取状态即可：

import { useDispatch, useSelector } from 'react-redux';
import { submitRegister } from './authSlice';

export default function RegisterPage() {
  const dispatch = useDispatch();
  const { loading, registerRes, error } = useSelector(state => state.auth);

  const handleSubmit = () => {
    // 如果需要动态传参，在dispatch时传入，thunk的submitData参数可以接收到
    dispatch(submitRegister());
  };

  return (
    <div>
      <button onClick={handleSubmit} disabled={loading}>
        {loading ? '提交中...' : '注册账号'}
      </button>
      {error && <p className="error">请求失败：{JSON.stringify(error)}</p>}
      {registerRes && <p className="success">注册成功</p>}
    </div>
  );
}

注意事项 #

不要随意修改config内的参数：不要删除JSON.stringify处理请求体、不要改动Authorization请求头、不要遗漏url上拼接的accessKey和secretKey，以上配置和你原生Axios调用完全一致时，请求效果和原有逻辑100%相同。
如果需要动态传入邮箱、密码等用户输入值，在dispatch时把用户输入作为参数传入，替换thunk中data对应的硬编码字段即可，其他请求配置保持不变。

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