未捕获的错误：操作必须是普通对象（React/Redux）答案

【问题标题】：Uncaught Error: Actions must be plain objects (React/Redux)未捕获的错误：操作必须是普通对象（React/Redux）
【发布时间】：2021-07-27 05:51:32
【问题描述】：

在名为 Checkout 的 React 页面上，我有以下代码：

componentDidMount() {
    let { org } = this.state;
    const data = { organisation: org };
    this.props.checkout_payment(data);
}

这里指的是一个 Redux 方法：

export const checkout_payment = async (data) => {
    let token = getAuthToken();
    const body = data;
    try {
        let result = await axios.post(`${url}/checkout_payment`, body, {
            headers: { Authorization: `${token}` },
        });
        return result;
    } catch (error) {
        if (error.response === undefined) {
            Notification({ message: error.message, success: false });
        } else {
            Notification({ message: error.response.data, success: false });
        }
    }
}

当代码从 Redux 方法到达 try 块时，我收到以下错误。知道我做错了什么吗？

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.
The above error occurred in the <Checkout> component:
    in Checkout (created by Connect(Checkout))
    in Connect(Checkout) (created by Context.Consumer)
    in withRouter(Connect(Checkout)) (at pages/index.js:240)
    in Route (at pages/index.js:236)
    in PrivateRoute (at pages/index.js:437)
    in Switch (at pages/index.js:320)
    in Router (at pages/index.js:319)
    in div (at pages/index.js:318)
    in Base (created by Connect(Base))
    in Connect(Base) (at src/index.js:91)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:90)
    in Provider (at src/index.js:89)

我也尝试用下面的代码替换 try 代码块，但这没有任何区别。

return (dispatch) => {
    axios
        .post(`${url}/checkout_payment`, body, { headers: { Authorization: `${token}` } })
        .catch((err) => {
            if (err.response === undefined) {
                Notification({ message: err.message, success: false });
            } else {
                return dispatch({ type: PAYMENT_ERROR, payload: err.response.data });
            }
        });
};

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

是的，你的 reducer 函数不应该有任何副作用，例如异步代码、HTTP 请求、读取/写入本地存储等。所以你必须使用中间件概念来使所有这些异步。要使用中间件，您需要配置您的商店。请查看docs

const store = createStore(
  reducer,
  applyMiddleware(middleware1, middleware2)
)

【讨论】：

知道使用redux-thunk 时这段代码应该是什么吗？我还没有编写自己正在使用的应用程序，但是已经为该应用程序配置了 redux-thunk。我不是程序员，也不懂文档。
如果 thunk 已经配置，那么它应该被添加到您的商店配置中，如下所示，applyMiddleware(thunk) 然后您可以创建一个操作。您可以查看此doc。或许，如果你已经配置了 redux-thunk，你可以尝试在你现有的操作中查找示例