如何解决 redux 错误使用自定义中间件进行异步操作？

Question

export const register = (user) => async (dispatch) => {
    try {
        const { res } = await api.register(user)
        dispatch({ type: REGISTER, payload: res });
    } catch (err) {
        console.log(err)
    }
}

export default (user = [], action) => {
    switch (action.type) {
        case REGISTER:
            return [...user, action.payload];
        default:
            return user;
    }
}

当我发送时，我收到“未捕获错误：操作必须是普通对象。使用自定义中间件进行异步操作”。谁能告诉我这里出了什么问题？

Answer 1

根据描述和给出的代码片段，这是我对这个问题的结论。

Redux 库默认不支持异步操作。该库通过中间件实现这一点。两个最流行的异步操作中间件是 redux thunk 和 redux saga。

我没怎么用过redux saga。但是使用redux thunk可以解决如下问题。

1 安装 redux thunk 库。

npm 安装 redux-thunk

2 将 redux thunk 添加到商店

看起来像这样

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

在这里您可以将根减速器替换为源中使用的减速器的名称。

现在，当您从代码中分派函数时，异步函数中使用的分派将由中间件添加。

更详细的解释请参考官方redux thunk documentation.

如何解决 redux 错误使用自定义中间件进行异步操作？

How to solve redux error Use custom middleware for async actions?

reactjs

redux

redux-thunk

react-redux