如何在调度后更新状态

Question

我是 react-native 和 redux 的新手，我想知道如何在调度后更新状态......

按照我的代码：

/登录表单.js

function mapStateToProps(state) { return { user: state.userReducer }; }
function mapDispatchToProps(dispatch) {
  return {
    login: (username, password) => {      
      dispatch(login(username, password)); // update state loggedIn
    }
  }  
}
const LoginForm = connect(mapStateToProps, mapDispatchToProps)(Login);
export default LoginForm;

/登录.js---在这里我有一个按钮，它调用此方法 loginOnPress((

loginOnPress() {
    const { username, password } = this.state;
    this.props.login(username, password);
    console.log(this.props.user.loggedIn)
  }

根据我上面的代码，我首先调用方法">this.props.login(用户名，密码(";它调用调度并更改状态">loggedIn"。

之后，我尝试更新状态但没有成功：

console.log(this.props.user.loggedIn)

注意：当我第二次单击此按钮时，状态会更新

Answer 1

调用调度会立即更新状态，但你的组件会稍后更新，所以你可以使用 componentWillReceiveProps 对 props 的变化做出反应，你可以看看这里更好地解释状态变化在 React 中是如何工作的

Answer 2

该函数this.props.login(username, password)在 redux 状态上调度登录操作。

启动store.getState()确实会在更新后立即获得 redux 状态，但通常，由于包装组件的 redux connect 函数，您实际上并不需要这样做。

redux connect 函数使用新的 props 更新你的组件，所以你通常会做的是在 react 生命周期的以下函数之一中"捕获"这些变化：

class Greeting extends React.Component {
  ...
  loginOnPress () {
    const { username, password } = this.state;
    this.props.login(username, password);
  }
  // before the new props are applied
  componentWillReceiveProps (nextProps) {
    console.log(nextProps.user.loggedIn)
  }
  // just before the update
  componentWillUpdate (nextProps, nextState) {
    console.log(nextProps.user.loggedIn)
  }
  // immediately after the update
  componentDidUpdate (prevProps, prevState) {
    console.log(this.props.user.loggedIn)
  }
  render() {
    ...
  }
}