На странице React под названием Checkout у меня есть следующий код:

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

Когда код достиг блока try из метода Redux, я получаю сообщение об ошибке ниже. Есть идеи, что я делаю не так?

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 });
            }
        });
};
0
Zoe 5 Май 2021 в 00:12

1 ответ

Лучший ответ

Да, ваша функция редуктора не должна иметь побочных эффектов, таких как асинхронный код, HTTP-запросы, чтение / запись в локальное хранилище и т. Д. Таким образом, вы должны использовать концепцию промежуточного программного обеспечения, чтобы сделать все это асинхронным. Чтобы использовать промежуточное ПО, вам необходимо настроить свой магазин. Ознакомьтесь с документами

const store = createStore(
  reducer,
  applyMiddleware(middleware1, middleware2)
)
1
Dmytro Krasnikov 4 Май 2021 в 21:27