mapStateToProps is not reflecting in component after action dispatch

Question

I have a reducer which looks like this:

export default function reducer(state={
  fetching: false,
}, action) {
  switch (action.type) {
    case 'LOGIN_REQUEST': {
      return {...state, fetching: true}
    }
...
return state

I dispatch action to it from compoenent and in component I have:

const mapStateToProps = (state) => {
  return state
}

My problem is:
1. In mapStateToProps state contains login.fetching: true
2. In component right after dispatching action to reducer this.props.login.fetching contains false.
3. In component render() method this.props.login.fetching is true.

Why in case 2. it is still false, is it possible and what I am missing here?

Action dispatch:

onLoginPress = () => {
    this.props.dispatch(loginUser(this.state.email.trim(), this.state.password.trim()))
console.log(this.props);

can you show the code for your component specifically where you are dispatching the action — bencrinkle
i wouldn't expect to see the props directly after your dispatch reflect the change in state. that would would only appear on the re-render, which by the sounds of it is what you are seeing? — bencrinkle

Shubham Khatri Shubham Khatri · Accepted Answer · 2017-02-09T15:16:42

The answer is really simple, you get false right after you dispatch an action because of the async nature of Javascript, so even before your props get modified your console.log(this.props) get called and hence it displays the previous value. However the render() function gets called when you state from reducer changes and hence it displays the updated value.

What you need there is the Promise on dispatch

Use this

onLoginPress = () => {
    this.props.dispatch(loginUser(this.state.email.trim(), this.state.password.trim())).then(() => {
   console.log(this.props);
})

I hope, I was able to explain it properly.

mapStateToProps is not reflecting in component after action dispatch

1 Answers