Reactjs 操作返回后未调用减速机?

Reactjs 操作返回后未调用减速机?,reactjs,mongodb,redux,Reactjs,Mongodb,Redux,这是我的登录操作代码。我做错了什么?如您所见,未调用reducer状态更新 请帮帮我,伙计们 反应-16.8 Axios Http客户端 Node&Mongo数据库后端 export const loginUser = (userData) => { axios.post(URL + '/api/admin/login', userData) .then(res => { return { type: S

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

请帮帮我,伙计们

反应-16.8 Axios Http客户端 Node&Mongo数据库后端

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
            }
        });
};
在此处对其应用操作,而不是返回res。您提到更改状态,因此类似的情况如下:

    .then(res => {
        this.state.someResult = res;
    })
在此处对其应用操作,而不是返回res。您提到更改状态,因此类似的情况如下:

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

您需要分派操作,而不仅仅是返回对象:

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

您需要分派操作,而不仅仅是返回对象:

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

请尝试以下代码示例:

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

请尝试以下代码示例:

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

使用箭头函数可以提高代码的可读性。无需在API.fetchComments中返回任何内容,当请求完成时,API调用是异步的,然后将得到响应,在那里您只需分派类型和数据

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

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

参考链接:

利用箭头函数,它提高了代码的可读性。无需在API.fetchComments中返回任何内容,当请求完成时,API调用是异步的,然后将得到响应,在那里您只需分派类型和数据

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

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

参考链接:

返回调度结果有什么意义?它很少有用。../src/appRedux/actions/Auth.js第31行:“useDispatch”未定义。您需要先从“react redux”导入{useDispatch}。更多信息:返回分派结果有什么意义?它很少有用。../src/appRedux/actions/Auth.js第31行:“useDispatch”未定义。您需要先从“react redux”导入{useDispatch}。更多信息:不,我想从dispatch Action调用reducer函数不,我想从dispatch Action调用reducer函数我尝试了这个,但失败了。类错误操作必须是对象这意味着您没有以正确的方式从组件分派函数。请签出此链接并按照正确的方式在组件中调用该操作。我试过了,但失败了。类错误操作必须是对象这意味着您没有以正确的方式从组件分派函数。请签出此链接并按照正确的方式在组件中调用该操作。