title: Redux: How to dispatch an action after state change
body: <p>This is a topic that has been covered before, but I am still haven't quite found an answer I like and would love some advice.</p>
  
  <p>I am having the following issue. My app contains an action called <code>CREATE_RESPONSE</code>, which creates a new response record and pushes it into the <code>responses</code> state. The action creator for this action is dispatched from my component when a user clicks a button.</p>
  
  <pre><code>onClick={() =&gt; {
      this.props.createResponse();
  }}
  </code></pre>
  
  <p>Now, after the user does this, I would like to open a modal for this new response. This modal relies on the new response state change, so must happen after <code>createResponse</code>.</p>
  
  <p>The most intuitive solution for me would be to use a callback, but I believe this represents a Redux anti-pattern.</p>
  
  <p>The other way would be to listen to response state changes, and then dispatch an action whenever the number of responses has changed (something similar to the subscribe example: <a href="http://redux.js.org/docs/api/Store.html#subscribe" rel="nofollow noreferrer">http://redux.js.org/docs/api/Store.html#subscribe</a>)</p>
  
  <pre><code>function responses(state) {
    return state.responses.size
  }
  
  let currentValue
  function handleChange() {
    let previousValue = currentValue
    currentValue = responses(store.getState())
  
    if (previousValue !== currentValue) {
      // Dispatch action here
    }
  }
  
  store.subscribe(handleChange)
  </code></pre>
  
  <p>The issue here is we are responding to all state changes that fulfill this condition. In my app, this incorrectly gets triggered on page load.</p>
  
  <p>So my question boils down to: what is the best way to dispatch an action in response to a state change?</p>
  
  <p>EDIT</p>
  
  <p>Here are simplified versions of my Modal and Response reducers, respectively:</p>
  
  <p>Modal</p>
  
  <pre><code>const modalState = Immutable.Map({
      isOpen: false,
      view: null,
      modalProps: {}
  });
  
  export const modal = (state = modalState, action) =&gt; {
      switch (action.type) {
          ...
      }
  }
  </code></pre>
  
  <p>Responses</p>
  
  <pre><code>const responseRecord = Immutable.Record({
      id: null,
      ...
  });
  
  export const responses = (state = Immutable.List([]), action) =&gt; {
      switch (action.type) {
          case 'CREATE_RESPONSE':
              newResponse = new responseRecord(...);
  
              state = state.unshift(newResponse);
  
              return state;
          ...
  </code></pre>