React Redux 错误：操作必须是普通对象。使用自定义中间件进行异步操作答案

【问题标题】：React Redux error: Actions must be plain objects. Use custom middleware for async actionsReact Redux 错误：操作必须是普通对象。使用自定义中间件进行异步操作
【发布时间】：2021-11-04 10:03:35
【问题描述】：

以前，我使用相同的方式在后端 (springboot) 中成功调用了其他 API，但创建新调用时收到错误消息：“操作必须是普通对象。使用自定义中间件进行异步操作”。我尝试了很多其他人的答案，但没有运气。有谁知道发生了什么？非常感谢。

行动：

export function getAllValuesAction(listId, player) {
    return async (dispatch) => {
        dispatch( getAllValues() );
        try {
            const token = localStorage.getItem('token');
            if(token) {
                tokenAuth(token);
            }
            const answer = await clientAxios.post(`/pays/sum/player/${listId}`, player);
            dispatch( obtenerSumaPagosJugListaExito(answer.data) );
        } catch (error) {
            dispatch( getAllValuesError() );
        }
    }
}

const getAllValues = () => ({
    type: START_GETTING_VALUES,
    payload: true
});
const getAllValuesSuccess = sumaPago => ({
    type: GETTING_VALUES_SUCCESS,
    payload: answer
});
const getAllValuesError = sumaPago => ({
    type: GETTING_VALUES_ERROR
});

商店：

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducers';
const store = createStore(
    reducer, 
    compose( applyMiddleware(thunk), 
        typeof window === 'object' &&
            typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined' ? 
                window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
    )
);
export default store;

令牌认证：

import clientAxios from './axios';
const tokenAuth = token => {
    if(token) {
          clienteAxios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    } else {
        delete clienteAxios.defaults.headers.common['Authorization'];
    }
}
export default tokenAuth;

const clientAxios = axios.create({
    baseURL: process.env.REACT_APP_BACKEND_URL
});
export default clientAxios;

加：

如果有人也知道（但至少我只需要知道第一个“react redux error”问题）：当我在调用中使用 GET 时，我收到错误消息而没有响应。当我使用 POST（如下面“控制器”中的示例）时，我首先收到响应，然后收到错误消息。

收到请求的springboot控制器：

@PostMapping("/pays/sum/player/{listId}")
public Double getSumPayPlayerList(@RequestHeader (name="Authorization") String token, @PathVariable long listId, @RequestBody Player player ) {...}

对数据库进行查询的支付存储库：

@Query("select SUM(g.import) from Pay g where g.listId=?1 and g.player=?2")
public Double sumPaysByPlayerList(Long listId, Player player);

谢谢！

【问题讨论】：

在async 操作中，您应该只调度一次。但是你在那里调度了多个动作。您可以考虑将您的 getAllValuesAction 拆分为更小的单独操作。
谢谢你，Skmak，我按你说的做了很多尝试（如下例所示），但似乎没有任何效果：
export const getAllValuesAction = (listId, player) => { return async (dispatch) => { const token = localStorage.getItem('token'); if(token) { tokenAuth(token); } const answer = await clientAxios.post(/pagos/sum/jug/${listId}, player);常量数据 = answer.data;调度（{类型：GETTING_VALUES_SUCCESS，有效负载：数据}）； } }
你能继续升级到最新版本的 Redux (4.1)，或者更好，切换到使用 Redux Toolkit 的configureStore吗？这些不会立即解决问题，但他们改进了错误消息，可以告诉您什么被传递给 dispatch，而不是简单的操作。
谢谢markerikson，我想我已经有了那个版本，这是package.json的一小部分：“react-redux”：“^7.2.4”，“redux”：“^ 4.1.0", "redux-thunk": "^2.3.0",

标签： reactjs redux

【解决方案1】：

我发现问题是因为我试图在 Modal 中显示该信息。由于某种原因，这种情况会产生一些延迟或不同步，因此必须删除模态并找到另一种显示信息的方式。谢谢大家的帮助。

【讨论】：