Question

这是我的登录操作代码。我究竟做错了什么？如您所见，未调用reducer状态更新。

请帮帮我！

反应-16.8 Axios Http客户端 Node和Mongo Db后端

export const loginUser = (userData) => {
    axios.post(URL + '/api/admin/login', userData)
        .then(res => {
            return {
                type: SIGNIN_USER,
                payload: storeData
            }

        })
        .catch(err => {
            return {
                type: SHOW_MESSAGE,
                payload: err.response.data
            }
        });
};

Answer 1

    .then(res => {
        return {
            type: SIGNIN_USER,
            payload: storeData
        }

    })

而不是返回res，请在此处对其执行操作。您提到了更改状态，所以类似：

    .then(res => {
        this.state.someResult = res;
    })

Answer 2

您需要分派操作，而不仅仅是返回对象：

const dispatch = useDispatch(); // Assuming you're inside functional component

export const loginUser = (userData) => {
    axios.post(URL + '/api/admin/login', userData)
        .then(res => {
            return dispatch({
                type: SIGNIN_USER,
                payload: storeData
            })

        })
        .catch(err => {
            return dispatch({
                type: SHOW_MESSAGE,
                payload: err.response.data
            })
        });
};

Answer 3

尝试使用此代码示例：

export const loginUser = userData => dispatch => (
    axios.post(URL + '/api/admin/login', userData)
        .then(res => dispatch({ type: SIGNIN_USER, payload: res }))
        .catch(err => dispatch({ type: SHOW_MESSAGE, payload: err.response.data }))
)

Answer 4

充分利用Arrow函数，可以提高代码的可读性。无需在API.fetchComments中返回任何内容，当请求完成时，Api调用是异步的，然后将获得响应，您只需要分派类型和数据即可。

下面的代码通过使用Arrow函数完成相同的工作。

export const bindComments = postId => {
  return dispatch => {
    API.fetchComments(postId).then(comments => {
      dispatch({
        type: BIND_COMMENTS,
        comments,
        postId
      });
    });
  };
};

参考链接：React-Redux: Actions must be plain objects. Use custom middleware for async actions

动作返回后没有调用Reducer吗？

4 个答案: