title: How do I redirect the url after a state update in a react redux application?
body: <p>I have a simple react redux application using react-router-redux. I have 2 routes, one is <code>feed</code> the other <code>add</code>. The add view provides a form. On form submission an <code>ADD_STORY</code> action is dispatched and my reducer properly sets a new state with the added story. Problem is I would like to redirect at that point to the <code>feed</code> view. My current approach below is not working. Any help would be greatly appreciated.</p>
  
  <p>my deps:</p>
  
  <pre><code>"react": "^15.4.1",
  "react-dom": "^15.4.1",
  "react-redux": "^4.4.6",
  "react-router-dom": "^4.0.0",
  "react-router-redux": "^5.0.0-alpha.4",
  "redux": "^3.6.0"
  </code></pre>
  
  <p>index.js</p>
  
  <pre><code>//... other imports above
  import { HashRouter } from 'react-router-dom'
  import createHistory from 'history/createBrowserHistory'
  import { Route } from 'react-router'
  
  import { ConnectedRouter, routerReducer, routerMiddleware, push } from 'react-router-redux'
  
  // Create a history of your choosing (we're using a browser history in this case)
  const history = createHistory()
  
  // Build the middleware for intercepting and dispatching navigation actions
  const middleware = routerMiddleware(history)
  
  // Add the reducer to your store on the `router` key
  // Also apply our middleware for navigating
  const store = createStore(
    reducers,
    applyMiddleware(middleware)
  )
  
  const render = () =&gt; {
    ReactDOM.render(
      &lt;AppContainer&gt;
        &lt;Provider store={store}&gt;
          &lt;ConnectedRouter history={history}&gt;
            &lt;HashRouter&gt;
              &lt;div className={styles.app}&gt;
            &lt;Header /&gt;
                  &lt;div&gt;
                    &lt;Route exact path="/" component={Feed} /&gt;
                    &lt;Route exact path="/add" component={AddStory} /&gt;
                  &lt;/div&gt;
                &lt;Footer /&gt;
              &lt;/div&gt;
            &lt;/HashRouter&gt;
       &lt;/ConnectedRouter&gt;
        &lt;/Provider&gt;
      &lt;/AppContainer&gt;,
      document.getElementById('root')
    );
  };
  </code></pre>
  
  <p>I then at another part of my code attempt to redirect from a container component</p>
  
  <pre><code>const mapDispatchToProps = (dispatch, ownProps) =&gt; {
    console.log('ownProps', ownProps)
  
    return {
      submitStory: (story) =&gt; {
        dispatch(createStory({
          title: story.match(/^(.+)\n?/)[1],
          body: story
        }))
      },
      doAction: (action) =&gt; {
        switch(action) {
          case "STORY_ADDED":
            console.log('PUSHING');
            ownProps.history.push('/')
            dispatch(push('/'))
            break;
          default: 
            return null
        }
      }
    }
  }
  </code></pre>
  
  <p>There are several issues I'm encountering. One is if I attempt <code>dispatch(ownProps.history.push('/')</code> I get an error in the middleware about the <code>action</code> being undefined. This is easy to understand since <code>ownProps.history.push('/')</code> returns undefined; though it will redirect; but only once. If I try to use the <code>push</code> that comes from <code>react-router-redux</code> I get a proper <code>action</code> object returned, but no redirect with <code>dispatch(push('/'))</code>.</p>
  
  <p>As you can see I attempted to remedy the situation by calling <code>ownProps.history.push('/')</code> then dispatching with react-router-redux push so I have proper action object but this only works once as well. My component's <code>shouldComponentUpdate</code> method never triggers on the state update; even though a new state is clearly produced; adding a new story in the view I'm attempting to redirect to.</p>
  
  <p>Thanks again.</p>