使用Redux Thunk+Axios获取API数据时触发TypeError: Cannot read 'type'

错误根源在于你对createAsyncThunk的使用方式错误——你把fetchMarketData定义成了一个返回createAsyncThunk结果的嵌套函数，但Redux Toolkit要求createAsyncThunk直接创建并导出可被dispatch的thunk动作，这种嵌套写法会导致dispatch时传递的不是合法的action对象，从而触发类型错误。

修正后的marketSlice.js #

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

// 正确定义异步Thunk：直接用createAsyncThunk创建，异步函数接收dispatch时传入的参数
export const fetchMarketData = createAsyncThunk(
  'market/fetchData', async (requestData) => {
    const url = 'http://localhost:8000/api/market'
    const headers = {
      'Content-Type': 'application/json',
    };
    // 用async/await简化异步逻辑（可选，也可以保留.then写法）
    const response = await axios.post(url, requestData, {headers})
    return response.data
  }
);

export const marketSlice = createSlice({
  name: 'market',
  initialState: {
    market: null,
    loading: false,
    error: '',
  },
  reducers: {},
  extraReducers: (builder) => {
    builder.addCase(fetchMarketData.pending, (state) => {
        state.loading = true;
        state.error = null;
    })
    builder.addCase(fetchMarketData.fulfilled, (state, action) => {
        state.loading = false;
        state.market = action.payload
    })
    builder.addCase(fetchMarketData.rejected, (state) => {
        state.loading = false;
        state.error = "Request Failed.";
    });
  },
});

其他文件无需修改 #

store.js和App.jsx的代码是正确的，修正marketSlice.js后，dispatch(fetchMarketData(requestData))会正确触发异步请求，extraReducers中的各个状态分支也能正常捕获请求的pending/fulfilled/rejected状态，更新对应的state。

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