Redux 工具包 TypeError：使用 redux thunk 获取数据时无法读取未定义的属性（读取“类型”）

Question

我需要使用 redux thunk 和 axios 从我的 API 获取数据。 但我在控制台中遇到了这个错误。

在本例中，我有一个

marketSlice

，我想使用 API 数据更新我的

state.market

。

marketSlice.js

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

// Thunk action to fetch data from the server
export const fetchMarketData = (requestData) => createAsyncThunk(
  'market/fetchData', () => {
    const url = 'http://localhost:8000/api/market'
    const headers = {
      'Content-Type': 'application/json',
    };
    return axios
      .post(url, requestData, {headers})
      .then(response => 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

import { configureStore } from '@reduxjs/toolkit'
import { marketSlice } from './marketSlice.js'

export const store = configureStore({
  reducer: {
    market: marketSlice.reducer
  },
  middleware: (getDefaultMiddleware)=> getDefaultMiddleware({
    serializableCheck: false,
  }),
})

App.jsx

import { useDispatch } from 'react-redux'
import { useEffect } from 'react'
import { fetchMarketData } from './redux/marketSlice.js'

export default function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    const requestData = {
      exchange: "binance"
    }
    dispatch(fetchMarketData(requestData));

  }, [dispatch]);

  return (
    <>
        Something...
    </>
  )

}

Answer 1

您似乎已将

fetchMarketData

编码为一个函数，该函数 返回 异步 thunk 操作，而不只是生成的 thunk 操作创建者本身。根据使用情况，我想说您打算将

requestData

作为传递给操作有效负载创建者的参数。

不正确

export const fetchMarketData = (requestData) => createAsyncThunk(
  'market/fetchData',
  () => {
    const url = 'http://localhost:8000/api/market'
    const headers = {
      'Content-Type': 'application/json',
    };
    return axios
      .post(url, requestData, { headers })
      .then(response => response.data);
  }
);

正确

export const fetchMarketData = createAsyncThunk(
  'market/fetchData',
  (requestData, thunkApi) => { // <-- arg passed here
    const url = 'http://localhost:8000/api/market';
    const headers = {
      'Content-Type': 'application/json',
    };
    return axios
      .post(url, requestData, { headers })
      .then(response => response.data)
      .catch(error => thunkApi.rejectWithValue(error));
  }
);

或

export const fetchMarketData = createAsyncThunk(
  'market/fetchData',
  async (requestData, thunkApi) => { // <-- arg passed here
    const url = 'http://localhost:8000/api/market';
    const headers = {
      'Content-Type': 'application/json',
    };

    try {
      const { data } = axios.post(url, requestData, { headers });
      return data;
    } catch(error) {
      return thunkApi.rejectWithValue(error);
    }
  }
);