TypeError набора инструментов Redux: невозможно прочитать свойства undef (чтение «типа») при извлечении данных с помощью Redux Thunk

Мне нужно получить данные из моего 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...
    </>
  )

}
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
54
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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);
    }
  }
);

Другие вопросы по теме

Пустая страница отображается при использовании навигации и сокращения в реакции JS
Увеличение счетчика в редукторе createSlice Redux-Toolkit
Ошибка: не удалось найти значение контекста реакции-редукса; убедитесь, что компонент завернут в <Provider> в собственном приложении React Expo
Состояние React Redux не отображается с помощью библиотеки React-Router
Как использовать одну и ту же функцию запроса RTK несколько раз с разными параметрами в одном и том же компоненте?
Как получить доступ к «селекторам» из фрагмента в наборе инструментов Redux
Обновите токен доступа с помощью набора инструментов redux-toolkit asyncThunks
В React/Next.js после нажатия ссылки данные не будут обновляться
Как убрать эту ошибку? redux-persist не удалось создать хранилище синхронизации. возвращение к хранилищу Noop
Как избежать вспышки ненужного компонента в течение 1 секунды после получения данных в React?