React Redux state change

Question

this.props.authState stays the same although I'm dispatching an action in my componentDidMount function:

componentDidMount() {
      if (localStorage.getItem('token')) {
        dispatch(updateAuthState('AUTHENTICATED'));
      }
  }

render() {
 <div>{this.props.authState}</div>
}

Home.propTypes = {
    authState: PropTypes.string
};

const mapStateToProps = (state) => {
    return {
        authState: state.authState
    }
};

const mapDispatchToProps = (dispatch) => {
  return {

  }
};

export default connect(mapStateToProps, mapDispatchToProps)(Home);

the output is NO_AUTH (the initial value of authState)

Reducer:

export function authState(state = "NO_AUTH", action) {
    switch (action.type) {
        case 'AUTH_STATE':
            return action.authState;
        default:
            return state;
    }
}

any idea why?

because You are dispatching in componentDidMount which this method gets called only once per component — Hemadri Dasari, Aug 26 '18 at 08:18
No it’s not an issue with componentDidMount(). It won’t be mounted again unless it is unmounted before — Sakhi Mansoor, Aug 26 '18 at 08:20

score 0 · Answer 1 · answered Aug 26 '18 at 08:17

0

If you’re mutating the state then component will not be re rendered. You need to return {...state, authState} from your reducer. And you verify your updated state in

componentWillReceiveProps(nextProps)
  {
   }

I hope this would solve the issue.

answered Aug 26 '18 at 08:17

Sakhi Mansoor

7,832
5
22
37

1

You only use `cwrp` if you have internal component state that you need to sync with props dynamically. Otherwise you don't need `cwrp` as `mapStateToProps` is going to assign new props thus trigger component rerender with all update lifecycles. – Karen Grigoryan Aug 26 '18 at 08:21
I just stated it to verify the state changes, didn’t recommend to use it. – Sakhi Mansoor Aug 26 '18 at 08:23

score 0 · Accepted Answer · answered Aug 26 '18 at 08:27

You're currently dispatching directly inside the componentDidMount which isn't mapped into:

connect(mapStateToProps, mapDispatchToProps)(Home);

This should do the job:

componentDidMount() {
      if (localStorage.getItem('token')) {
        this.props.onUpdateAuthState('AUTHENTICATED');
      }
  }

const mapDispatchToProps = (dispatch) => {
  return {
    onUpdateAuthState: function(authState) {
      dispatch(updateAuthState(authState));
    }
  }
};

Now, this will get the authState:

const mapStateToProps = (state) => {
    return {
        authState: state.authState
    }
};

React Redux state change

2 Answers2

Linked