调度后如何更新状态

Question

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

按照我的代码：

/LoginForm.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;

/Login.js ---这里我有一个按钮调用这个方法 loginOnPress()

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

根据我上面的代码，我首先调用方法 'this.props.login(username, password);' 调用调度并更改状态 'loggedIn '。

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

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

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

Answer 1

调用 dispatch 将立即更新状态，但您的组件将稍后更新，因此您可以使用 componentWillReceiveProps 对道具的更改做出反应，您可以查看 here 以更好地解释状态如何改变在 React 中起作用

Answer 2

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

启动 store.getState() 确实会在更新后立即为您提供 redux 状态，但通常您并不需要这样做，因为包装了您的 redux connect 函数组件。

redux connect 函数会使用新的 props 更新您的组件，因此您通常会在 react lifecycle 的以下函数之一中“捕捉”这些更改：

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() {
    ...
  }
}