React Component事件处理函数未从Redux Store接收最新值

Question

我正在开发一个简单的应用程序作为我的副项目，只是为了进一步了解React和Redux。我在调用异步操作创建者时发现了一个问题，该创建者更新了reducer中的值，但是当我尝试访问组件事件处理函数中的值时，它仍然具有旧值。

这是我的动作创建者：

export const assignUsername = username => async dispatch => {
  dispatch({type: types.ASSIGN_USERNAME_REQUEST})

  await axios({
    method: "PUT",
    url: "/v1/user/username",
    data: {
      username: username
    }
  })
  .then(response => {
    if(response.data && response.data.success){
      dispatch({
        type: types.ASSIGN_USERNAME_SUCCESS,
        payload: response.data.result
      })
    }else{
      dispatch({type: types.ASSIGN_USERNAME_FAILED})
      dispatch(httpPopUpError(response.status, response.data.message))
    }
  })
}

这里是减速器：

var initialState = {
  loading: false,
  result: null,
  error: false
};

function AuthReducer(state = initialState, action) {
  switch (action.type) {
    case types.ASSIGN_USERNAME_REQUEST:
      return {
        ...state,
        loading: true,
        error: false
      }
    case types.ASSIGN_USERNAME_FAILED:
      return {
        ...state,
        loading: false,
        error: true
      }
    case types.ASSIGN_USERNAME_SUCCESS:
      return {
        ...state,
        loading: false,
        result: action.payload,
        error: false
      }
    default:
      return state;
  }
}

这里是事件处理函数，它调用动作创建者并访问商店：

  handleAssignUsername = (e) => {
    e.preventDefault();

    formValidator(this.state.form)
      .then(validatedForm => {
        this.setState({
          ...this.state,
          form: validatedForm
        }, () => {
          this.props.assignUsername(this.state.form.username.value)
          .then(() => {
            if(!this.props.AuthReducer.error) {
              this.props.history.push("/")
            }
          })
        })
      })
      .catch(errorForm => {
        this.setState({
          ...this.state,
          form: errorForm
        })
      })
  }

如您在上面看到的，我访问“ this.props.AuthReducer.error” tp，确定它是否有错误，然后决定重定向。但是，错误值仍然是[[false，尽管在​​Redux Devtools中我已经看到它已经变成true

我真的很感激，如果有人可以提供帮助，或者如果我的方法不合适，也许会建议一种更优雅的方法。谢谢。

注意：我在其他项目中尝试了类似的方法，但效果很好。那就是让我感到困惑的原因，因为有时它会起作用，有时却不会。

编辑：我尝试了Hemanath的建议，但是当我在控制台上记录错误时，即使错误在商店中变为true

，它仍然具有相同的值。

 componentDidUpdate(prevProps){
  console.log(prevProps.AuthReducer.error, "PREV");
  console.log(this.props.AuthReducer.error, "NOW");
  if(prevProps.AuthReducer.error === false && this.props.AuthReducer.error === true){
    this.props.history.push("/");
  }
}

The screenshot of the console.log关于在render方法中重定向，恐怕不是一个好方法，因为
error的默认值为FALSE，如果我这样做，它将始终重定向。
我想先执行AJAX请求，然后在错误仍然为假的情况下重定向。

Answer 1

使用componentDidUpdate生命周期方法来监视this.props.AuthReducer.error值更改并根据新值从那里重定向，

componentDidUpdate(prevProps){
  if(prevProps.AuthReducer.error === false && this.props.AuthReducer.error === true){
    this.props.history.push("/");
  }
}

或按照注释中的建议，您可以在Redirect方法中使用react-router中的render组件进行重定向，例如这样
render() {
    const { AuthReducer } = this.props;
    if (AuthReducer && AuthReducer.loading === false && AuthReducer.error === true) {
      return <Redirect to='/' />;
    }
    return (
      <div>....</div>
    );
  }