我的在redux中更改状态的调度未调用?

时间:2019-06-18 12:39:17

标签: reactjs redux dispatch flash-message

我试图在重置密码后在登录组件上向用户显示Flash消息。我已经评论了axios调用,因为在这种情况下它并不重要。我两次调用了dispatch,第一次设置状态(成功消息),第二次将成功设置为空字符串。

这是我的resetPassword动作,我在其中调用调度:

export const resetPassword = values => async dispatch => {
  try {
    const token = window.location.href.split("/")[4];
    const data = {
      password: values.password,
      confirmPassword: values.confirmPassword,
      token
    };
    // let res = await axios.post(API_URL + "/resetuserpassword", data);
    // console.log("resStatus:", res);
    window.location.href = "http://localhost:3000/login";
    dispatch({
      type: RESET_SUCCESS,
      payload:
        "You successfully reset the password , just log in with the new one."
    });
    await sleep(2000);
    dispatch({
      type: RESET_SUCCESS,
      payload: ""
    });
catch (error) {
    console.log("error occured:", error);

我的ResetPassReducer:

import { RESET_SUCCESS } from "../actions/types";

export default (state = { success: "" }, action) => {
  switch (action.type) {
    case RESET_SUCCESS:
      console.log("RESET_SUCCESS DISPATCHED...");
      return {
        success: action.payload
      };

    default:
      return state;
  }
};

和我在Login组件中的renderMessage函数:

renderMessage = () => {
    const error = this.props.error;
    const success = this.props.success;

    if (success) {
      return (
        <FlashMessage duration={5000} style="color">
          <p style={{ color: "green" }}> {success.toString()} </p>
        </FlashMessage>
      );
    }
return null;
  };

1 个答案:

答案 0 :(得分:0)

您正在导航,然后再进行调度呼叫。 window.location.href = '...'之后的所有代码都不会执行。

只需将window.location.href = "http://localhost:3000/login";移动到块的末尾即可。