代码之家 › 专栏 › 技术社区 › renakre

Then()在React中执行分派操作后不起作用

redux-thunk promise reactjs javascript

0

renakre · 技术社区 · 4 年前

我有以下几点 Login 功能:

export function Login(username, password) {
   return dispatch => {
    dispatch(loginBegin());

    axios({
        method: 'post',
        url: 'api/User/Login',
        data: { username, password },
    }).then(response => {

        if (response.data !== null) {
            console.log('success: Login is successful');

            dispatch(loginSuccess(response.data));

        } 
    }).catch(error => { dispatch(loginFailure(error.response.data.message)) });
  }
}

我在Login组件中按如下方式调用此函数:

function FormSubmitHandle(values) {
    setFormSubmitted(true);

    props.login(values.username, values.password)
        .then((login_succeeded) => {
            console.log('YESSSS');
            console.log(login_succeeded);
        });
}

然而, .then() 部分不起作用。它不打印任何东西。

你知道为什么会发生这种情况吗?

0 回复 | 直到 4 年前

1

MorKadosh 4 年前

您应该返回:

  return axios({
        method: 'post',
        url: 'api/User/Login',
        data: { username, password },
    }).then(response => { ....

请看这里: is it considered good practice to pass callBacks to redux async action?

不过,我想知道你想用它做什么。在处理基于流量的模式(如Redux)时,我们应该保持数据流在一个方向上(记住这一点)

2

1

shahrooz bazrafshan 4 年前

您可以按如下方式进行更改:

export function Login(username, password) {
   return async (dispatch) => {
    dispatch(loginBegin());
try{
      let res = await axios({
         headers:{
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
         },
        'method': 'post',
        'url': 'api/User/Login',
        data: { username, password },
        });
     console.log('success: Login is successful');
     dispatch(loginSuccess(res));
  }
  catch(error)  { dispatch(loginFailure(error.response.data.message)) });

}

然后你可以像下面这样使用它:

cosnt FormSubmitHandle = async (values)=> {
    setFormSubmitted(true);

    let res = awiat props.login(values.username, values.password);
            console.log('YESSSS');
}