Мне нужно получить данные из моего API с помощью Redux Thunk и Axios. но я сталкиваюсь с этой ошибкой внутри своей консоли.
В этом случае у меня есть 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...
</>
)
}
🤔 А знаете ли вы, что...
React обеспечивает высокую производительность благодаря эффективной обработке изменений DOM.
Кажется, вы закодировали 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);
}
}
);