title: Redux & React Router: Combing dispatch and navigation (history.push)
body: <p>I'm a bit clueless as to how to use React Router's <code>history.push('/route')</code> with <code>Redux</code>.</p>
  
  <p>In other words, if you connect a component with Redux's <code>mapDispatchToProps</code>, how do you put <code>history.push('/route')</code> that is supposed to be fired after dispatching a certain action?</p>
  
  <p>To clarify the issue, here is a snippet of my experimentation...</p>
  
  <pre><code>class PostContainer extends React.Component {
  
      handleSubmit(data) {
          return this.props.addPost(data);
      }
  
      render() {
          return (&lt;Post onSubmit={data=&gt; this.handleSubmit(data)}/&gt;);
      }
  }
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {    
          addPost: (data) =&gt; {
              dispatch(addPost(data)).data.then((result) =&gt; {
                  dispatch(addPostFulfilled(result.data));
  
                  //How do you call the following function?
                  this.props.history.push('/posts')
              }).catch((error) =&gt; {
                  dispatch(addPostRejected());
              });
          },      
      }
  }
  
  export default connect(null, mapDispatchToProps)(PostContainer);
  </code></pre>
  
  <p>As you can see, as soon as a post is added into Redux's state through <code>addPostFulfilled</code>, the page needs to move to <code>/posts</code> via history.push.</p>
  
  <p>According to Redux's doc, containers are made for updating states (as well as fetching data). So, dumb components are not supposed to put anything like <code>history.push</code>.</p>
  
  <p>What would be a better approach than the code above?</p>
  
  <p>Any advice will be appreciated.</p>