看不到更新状态答案

【问题标题】：Can not see updated state看不到更新状态
【发布时间】：2017-02-06 11:54:27
【问题描述】：

我有以下操作：

export function loginUserRequest() {
  console.log('ACTION CALLED');
  return {
    type: LOGIN_USER_REQUEST,
  };
}

这是减速器：

export default function loginReducer(state = initialState, action) {
  switch (action.type) {
    case LOGIN_USER_REQUEST:
      console.log('REDUCER CALLED');
      return Object.assign({}, state, {
        isAuthenticated: true,
        isAuthenticating: true,
        statusText: null,
      });
    default:
      return initialState;
  }
}

然后，我的组件：

class Login extends React.Component {

  goHome = () => {
    browserHistory.push('/');
  }

  handleSubmit = (values) => {
    console.log(this.props.isAuthenticating);
    this.props.actions.loginUserRequest();
    console.log(this.props.isAuthenticating);
  }

  render() {
    return (
      <LoginForm onSubmit={this.handleSubmit} />
    );
  }
}

Login.propTypes = {
  actions: PropTypes.objectOf(PropTypes.func).isRequired,
  isAuthenticating: PropTypes.bool.isRequired,
};

const mapStateToProps = state => ({
  token: state.login.token,
  isAuthenticated: state.login.isAuthenticated,
  isAuthenticating: state.login.isAuthenticating,
});

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(actionCreators, dispatch),
});

export default connect(mapStateToProps, mapDispatchToProps)(Login);

LoginForm 是一个redux-form 组件。

所以，handleSubmit 函数的加速输出是：

false
ACTION CALLED
REDUCER CALLED
true

但它给了我：

false
ACTION CALLED
REDUCER CALLED
false

但是在redux dev tool 中我可以看到LOGIN_USER_REQUEST 中的差异：

为什么我在handleSubmit 函数中看不到它？是不是和redux-form库有关？

额外信息：

添加了shouldComponentUpdate和logger

shouldComponentUpdate = (nextProps, nextState) => {
    console.log('Should component update called');
    if (this.props.isAuthenticating !== nextProps.isAuthenticating) {
      console.log('distntict');
      return true;
    }
    console.log('false');
    return false;
  }

【问题讨论】：

尝试在你的组件中添加shouldComponentUpdate方法，如果props不相等则返回true。
@DmitriyKovalenko 看看我更新的帖子。我还添加了一个记录器
我能想象的只有一个变种，就是你不通过 redux connect 连接你的组件，也不创建 mapStateToProps，但看起来，你这样做了。

标签： javascript reactjs redux react-redux redux-form

【解决方案1】：

由于 Javascript 的异步特性，您会得到这样的结果。所以在你的代码中

handleSubmit = (values) => {
    console.log(this.props.isAuthenticating);
    this.props.actions.loginUserRequest();
    console.log(this.props.isAuthenticating);
  }

首先，您正在打印 prop 的值，然后调用该操作，但在该操作返回具有更新状态的响应之前，您的第三条语句被调用以记录该值，并且由于状态尚未更新，您会看到同样的结果。

一种方法是有回调，但这似乎不是您的情况的要求。如果你想记录状态，那么你可以在componentWillReceiveProps 函数中这样做

喜欢

componentWillReceiveProps(nextProps) {
     if(this.props.isAuthenicating != nextProps.isAuthenticating) {
          console.log(nextProps.isAuthenticating);
     }
}

希望对你有帮助

【讨论】：