javascript - 重定向完成后如何调度操作(Redux)？

Question

只要 facebook 身份验证正在进行，我就会尝试让加载微调器不断显示。并在请求+页面重定向完成后 Conceal 加载微调器。

在这种情况下，可以通过单击登录按钮来验证 Facebook，然后浏览器将重定向到 http://localhost:3000/auth/facebook .

这是我到目前为止所尝试过的。

我制作了一个 reducer 来存储加载状态，稍后我可以使用操作覆盖该状态。

dispatch(itemsIsLoading(true));

Redux 状态树:

{
  ...
  isLoading: loadingReducer
}

这是该操作的代码。

export const requestLogin = ({ username, password }, callback) => async dispatch => {
  // Show the loading spinner
    dispatch(itemsIsLoading(true));

  const res = await axios.post('/api/authenticate', {
    username,
    password
  });

  dispatch({ type: REQUEST_LOGIN, payload: res.data });

  // Redirect to/auth/facebook after login amember is success
  callback();

  // Stop spinner and show the content
  dispatch(itemsIsLoading(false));
};

 export function itemsIsLoading(bool) {
  return {
    type: ITEMS_IS_LOADING,
    isLoading: bool
  };
}

这是我提交登录表单后使用的方法

 onFormSubmit = async (e) => {
    e.preventDefault();

    let dataLogin = {
      username: this.username.value.trim(),
      password: this.password.value.trim(),
    }

    this.props.requestLogin(dataLogin, () => {
      switch (this.props.auth) {
        case 1:
          this.props.redirect(true, '/auth/facebook');
          break;
        case 2:
          toast.warn('Your license is expired. Contact iqbal bro');
          break;
        case 3:
          toast.error('Username or password is not match');
          break;
        default:
          console.log('Something is wrong, please contact administrator');
      }
    });
  }

我的问题是如何在页面重定向完成后调度操作。 因为使用上述代码，旋转器将在请求解决后立即停止，并且不关心重定向过程。

Answer 1

根据我的回答，我假设您可以控制重定向后呈现的组件。如果是这种情况，您可以简单地将 dispatch(itemsIsLoading(false)) 放入重定向后立即呈现的组件的 componentDidMount 钩子(Hook)中。在 requestLogin 中，您可以执行以下操作:

  .
  .
  .
  callback();

  if(!res.data.successfulAuth) {
    dispatch(itemsIsLoading(false));
  }
};

希望这能解决您的问题!