看不到更新状态

Question

我有以下操作：

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;
  }

Answer 1

您得到这样的结果是因为 Javascript 的异步性质。所以在你的代码中

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

首先，您要打印 prop 的值，然后调用操作，但在操作 returns 更新状态的响应之前，调用第三个语句来记录值，并且自从状态尚未更新，您会看到相同的结果。

一种方法是回调，但这似乎不是您的情况所必需的。如果您想记录状态，那么您可以在 componentWillReceiveProps 函数

中进行

喜欢

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

希望对你有帮助

看不到更新状态

Can not see updated state

javascript

reactjs

redux

redux-form

react-redux