How to get state updated after dispatch

user_8923100 0
Viewed 7357

I'm new with react-native and redux and I want to know how can I get the state updated after the dispatch...

Follow my code:

/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 ---Here I've a button which calls this method loginOnPress()

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

According my code above, I call first the method 'this.props.login(username, password);' that calls the dispatch and change the state 'loggedIn'.

And after that I try to get the state updated but without success:

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

Note: When I click the second time on this button the state comes updated

react-redux redux react-native
2 Answers

Calling dispatch will update the state immediately but your components will be updated a little bit later so you can use componentWillReceiveProps to react to changes in the props, you can have a look here for a better explanation of how state change works in React

user_18758100

The function this.props.login(username, password) dispatches a login action on the redux-state.

Launching store.getState() will indeed immediately get you the redux-state after the update, but usually, you don't really need to do it because of the redux connect function that wraps your component.

The redux connect function updates your component with new props, so what you would usually do is "catch" these changes in one of the following functions of the 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() {
    ...
  }
}
user_38654690
Related