By TheUnreal


2018-08-26 08:13:14 8 Comments

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?

2 comments

@Bhojendra Rauniyar 2018-08-26 08:27:24

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
    }
};

@Sakhi Mansoor 2018-08-26 08:17:08

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.

@Karen Grigoryan 2018-08-26 08:21:58

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.

@Sakhi Mansoor 2018-08-26 08:23:23

I just stated it to verify the state changes, didn’t recommend to use it.

@Karen Grigoryan 2018-08-26 08:26:58

Misread, fair enough

Related Questions

Sponsored Content

8 Answered Questions

[SOLVED] Why use Redux over Facebook Flux?

1 Answered Questions

[SOLVED] In Redux, how do I update only part of a state object?

  • 2018-05-07 16:49:19
  • EJP
  • 677 View
  • 0 Score
  • 1 Answer
  • Tags:   reactjs redux

2 Answered Questions

[SOLVED] Create modal in react-redux using stateless functional components

1 Answered Questions

5 Answered Questions

[SOLVED] How to pass actions down to the components in redux

2 Answered Questions

2 Answered Questions

[SOLVED] React-redux tutorial : Where does children come from

1 Answered Questions

1 Answered Questions

[SOLVED] Redux actions not calling reducers

0 Answered Questions

React-Redux best practice to change auth state

Sponsored Content