title: How to get React component to detect when state object has changed and re-render?
body: <p>I have a React component: stepA, which obtains a value on submit which is then stored in my redux store as <code>state.chef_positions.[0].chef_title_id</code>.</p>
  
  <p>After a user submits StepA, they are instantly directed to StepB. StepB is mounting before stepA's reducer has finished, meaning StepB is loading a incorrect value from the store.</p>
  
  <p>What is the right way to get stepB to re-render when stepA user action has been saved to the server/store, to re-render it's dispatch has finished?</p>
  
  <pre><code>class stepA extends React.Component {
  
    handleSubmit(data) {
      this.props.actions.createChefPosition(data);
      this.props.nextStep();
    }
  
  ...
  
  
  class stepB extends React.Component {
  
    componentDidMount() {
      const title_id = this.props.chef_positions[0].chef_title_id;
      this.props.dispatch(loadChefTitleSkills(chef_title_id));
    }
  
    stepB.propTypes = {
      chef_positions: PropTypes.array.isRequired,
    };
  
    function mapStateToProps(state, ownProps) {
      return {
        chef_positions: state.chef_positions,
      };
    }
  
  export default connect(mapStateToProps)(stepB);
  </code></pre>