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

在名为

Checkout

的React页面上，我有以下代码：

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

这是指一种重复使用方法：

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)

---

是的，您的reducer函数不应该有任何副作用，例如异步代码、HTTP请求、对本地存储的读/写等。 因此，您必须使用中间件概念来实现所有这些异步。 要使用中间件，您需要配置存储。 请查收

---

您知道使用redux thunk时该代码应该是什么吗？我还没有编写我正在使用的应用程序，但是已经为该应用程序配置了redux thunk。我不是程序员，也不理解文档。如果thunk已经配置好，那么应该像下面那样将它添加到您的商店配置中，

applyMiddleware（thunk）

，然后您可以创建一个操作。你可以检查一下。也许，如果您已经配置了redux thunk，您可以尝试在现有操作中找到示例

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 });
            }
        });
};

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