Error: Actions must be plain objects. Use custom middleware for async actions

Question

我有以下代码，它抛出操作错误必须是简单的 objects.i 认为问题出在 redux thunk 但我无法纠正它。

动作文件-

import axios from "axios";
export const addBiller = (biller = {}) => {
return async dispatch => {
const res = await axios.post("/api/biller", biller);

dispatch({ type: "ADD_BILLER", payload: res.data });
};
};

我的店铺-

import { createStore, combineReducers, applyMiddleware } from "redux";
import billerReducer from "../reducers/Billers";
import userReducer from "../reducers/User";
import billReducer from "../reducers/Bills";
import authReducer from "../reducers/Auth";
import reduxThunk from "redux-thunk";
export default () => {
 const store = createStore(
combineReducers(
  {
    Billers: billerReducer,
    Users: userReducer,
    Bills: billReducer,
    Auth: authReducer
  },
  applyMiddleware(reduxThunk)
  )
  );
 return store;
 };

后端文件-

 const mongoose = require("mongoose");
 const Biller = mongoose.model("biller");
 module.exports = app => {
 app.post("/api/biller", async (req, res) => {
 const { billerName, billerDescription } = req.body;
 const biller = new Biller({
  billerName: billerName,
  billerDescription: billerDescription
  });
   biller = await biller.save();
    res.send(biller);
    });
     };

我的减速器-

   const BillerDefaultState = [];
   const billerReducer = (state = BillerDefaultState, action) => {
    switch (action.type) {
    case "ADD_BILLER":
     return [...state, action.biller];
     default:
      return state;
     }
     };
     export default billerReducer;

Answer 1

看起来这是将 Thunk 初始化到存储中的方式 - 增强器应该是第三个参数。

来自docs

createStore(reducer, [preloadedState], [enhancer])

[enhancer] (Function): The store enhancer. You may optionally specify it to enhance the store with third-party capabilities such as middleware, time travel, persistence, etc. The only store enhancer that ships with Redux is applyMiddleware().

以下是我在我的项目中对其进行初始化的方式，请注意我已经以与您在代码中定义它的方式类似的方式导入了 reducers 对象：

import { createStore, applyMiddleware, compose } from 'redux'
import reduxThunk from 'redux-thunk'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(reducers, {}, composeEnhancers(
  applyMiddleware(reduxThunk)
))

请注意，我还添加了 Redux Devtools，但如果您不想要此附加功能，则 you can just stick to compose 或 applyMiddleware 单独添加（如果没有任何内容可编写） .

Error: Actions must be plain objects. Use custom middleware for async actions

Error: Actions must be plain objects. Use custom middleware for async actions

middleware

reactjs

redux

redux-thunk

axios