React Redux报错Actions must be plain objects问题排查

问题根因排查 #

1. 报错"Actions must be plain objects"直接原因 #

你在接口请求成功后调用的action函数名不匹配：

• 你定义的成功action是getAllValuesSuccess，但实际dispatch的是未定义的obtenerSumaPagosJugListaExito，调用未定义的函数会返回undefined，redux要求dispatch的必须是纯对象，传入undefined就会触发该报错。
• 同时getAllValuesSuccess函数内部存在变量引用错误：你用了作用域外的answer作为payload，应该替换为入参sumaPago。

修复后代码：

// 把成功回调的dispatch改为调用已定义的成功action
dispatch( getAllValuesSuccess(answer.data) );

// 修正getAllValuesSuccess的payload引用
const getAllValuesSuccess = sumaPago => ({
    type: GETTING_VALUES_SUCCESS,
    payload: sumaPago
});

2. tokenAuth封装拼写错误 #

你导入的axios实例名为clientAxios，但函数内部用的是多了字母e的clienteAxios，会导致请求头无法正常携带token，触发鉴权失败。

修复后代码：

const tokenAuth = token => {
    if(token) {
          clientAxios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
    } else {
        delete clientAxios.defaults.headers.common['Authorization'];
    }
}

3. GET方法调用报错原因 #

你的后端接口只声明了@PostMapping，没有对应的GET接口定义，所以用GET方式调用会直接返回405方法不允许错误，自然无响应。

内容的提问来源于stack exchange，提问作者Diego Benedetto