Question

我正在对后端进行剩余的API调用以进行登录，我在API中添加了3秒的延迟。我尝试在控制器中调用登录操作，但似乎未按预期阻止？我想在等待API返回之前禁用提交按钮。我以为login（）调用会被阻止？

预期的行为：该按钮将处于加载状态，并在API返回后恢复正常。

我得到的是：this.setState（{loading：false}）;立即运行，而无需等待操作完成。

控制器

    handleSubmit = (e, token = false) => {
        const { login, clearMenu } = this.props;
        e.preventDefault();

        this.props.form.validateFieldsAndScroll((err, data) => {
            if (!err) {
                this.setState({ loading: true });
                login(data);
                this.setState({ loading: false });
            }
        });
    };

actions.js

const actions = {
  LOGIN_REQUEST: 'LOGIN_REQUEST',
  LOGIN_SUCCESS: 'LOGIN_SUCCESS',
  LOGIN_ERROR: 'LOGIN_ERROR',
  login: (payload) => {
    return ({
      type: actions.LOGIN_REQUEST,
      payload, // { subdomain, email, password, remember }
    })
  }
};
export default actions;

saga.js

export function* loginRequest() {
  yield takeEvery('LOGIN_REQUEST', function*({ payload }) {
    const resData = yield call(post, '/auth/login', payload);

    if (resData)
      yield put({
        type: actions.LOGIN_SUCCESS,
        accessToken: resData.access_token,
        companyToken: resData.company_token,
        remember: payload.remember,
      });
    else
      yield put({
        type: actions.LOGIN_ERROR
      });
  });
}

我在这里错过了什么吗？

Redux Saga-等待操作完成（异步调用）

0 个答案: