未捕获错误：操作必须是普通对象。相反，实际类型是：'Promise' React-Redux

Question

我有一个客户端问题。服务器端工作正常，deleteCourse方法删除了课程，但我收到了您在客户端标题中看到的错误。我不确定发生了什么。如果我需要提供其他东西，只需问：D

/动作/课程.js

export const deleteCourse = (id) => async (dispatch) => {
try {
await api.deleteCourse(id);
dispatch({ type: DELETE, payload: id });
} catch (error) {
console.log(error);
}
};

/reducers/courses.js

import { FETCH_ALL, CREATE, UPDATE, DELETE } from '../../constants/actionTypes';
export default (courses = [], action) => {
switch (action.type) {
case FETCH_ALL:
return action.payload;
case CREATE:
return [...courses, action.payload];
case UPDATE:
return courses.map((course) =>
course._id === action.payload._id ? action.payload : course
);
case DELETE:
return courses.filter((course) => course._id !== action.payload);
default:
return courses;
}
};

/api/index.js

import axios from 'axios';
//Our route
const API = axios.create({ baseURL: 'http://localhost:5000' });
//Occurse before all the bellow requests
//Za google je result a za klasican je token
API.interceptors.request.use((req) => {
if (localStorage.getItem('profile'))
req.headers['Authorization'] = `Bearer ${
JSON.parse(localStorage.getItem('profile')).token
}`;
return req;
});
export const signIn = (formData) => API.post('/user/signIn', formData);
export const signUp = (formData) => API.post('/user/signUp', formData);
export const fetchCourses = () => API.get('/courses');
export const createCourse = (newCourse) => API.post('/courses', newCourse);
export const updateCourse = (id, updatedCourse) =>
API.patch(`./courses/${id}`, updatedCourse);
export const deleteCourse = (id) => API.delete(`./courses/${id}`);

/index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../src/api/reducers';
const store = createStore(reducers, compose(applyMiddleware(thunk)));
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App />
</Provider>
);

/启动动作的按钮

<Button size="small" color="primary" onClick={() => {
dispatch(deleteCourse(course._id))}}><DeleteIcon fontSize="small" /> Delete</Button>

我试着安慰.log deleteCourse，我发现这是一个坚定的承诺。现在我在youtube上看了一些课程，并制作了自己的项目，但所有这些都对那个家伙非常有效。

提前谢谢！

Answer 1

调度的操作应该是如下对象：

{ type: DELETE, payload: id }

但你在这里调度一个函数：

dispatch(deleteCourse(course._id))

与其调度一个函数，我认为你应该直接调用它。在内部，你的函数正在调度你想要的动作，所以你应该很好。

<Button size="small" color="primary" onClick={() => {
deleteCourse(course._id)}}><DeleteIcon fontSize="small" /> Delete</Button>

Answer 2

一般来说：您没有配置redux-thunk中间件，没有它就无法工作。

编辑：不，你做到了——老实说，在这一点上，我不能100%确定你为什么会收到错误消息。

---

但除此之外：您在这里编写的Redux风格已经过时了三年，可能是代码量的4倍，具有更多的间接性，更难学习
2022年你不应该写这样的代码。

请阅读为什么Redux Toolkit是今天如何使用Redux的，然后按照官方的Redux教程，从一开始就教你RTK。