我需要使用 redux thunk 和 axios从我的API获取数据。但我在控制台中遇到了这个错误。
在这种情况下,我有一个marketSlice
,我想state.market
用 API 数据更新我的。
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.";
});
},
});
商店.js
import { configureStore } from '@reduxjs/toolkit'
import { marketSlice } from './marketSlice.js'
export const store = configureStore({
reducer: {
market: marketSlice.reducer
},
middleware: (getDefaultMiddleware)=> getDefaultMiddleware({
serializableCheck: false,
}),
})
应用程序.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...
</>
)
}
您似乎已编码
fetchMarketData
为一个返回异步 thunk 动作创建者函数的函数,而不只是返回生成的 thunk 动作本身。根据使用情况,我想说您打算将 作为requestData
传递给操作有效负载创建者的参数。不正确
正确的
或者