react-router-redux push function not working from epic ?

Hi guys,

Thanks for this powerful middleware.

I am trying to push new route from epic function using push function of react-router-redux but seems push is not firing!

    import * as ajax from '../../utils/ajax';

    import {
    	FETCH_PRODUCTS_REQUEST,
    }  from '../actions/actionTypes';

    import { doFetchProductsFulfilled } from '../actions/doFetchProducts';
    import { push } from 'react-router-redux';

    export default function epicFetchProducts(action$, store, { queryString }) {
    	return action$.ofType(FETCH_PRODUCTS_REQUEST)
    		.map(function(action){
    			store.dispatch(
    				push('/fooo' )
    			)
    			const searchString = queryString.stringify(action.atts)
    			return Object.assign({}, action, {
    				searchString
    			})

    		})
    		.mergeMap(action =>
    			ajax.get(`/products?${action.searchString}`)
    		  .map(response => doFetchProductsFulfilled(response))
    		);
    }

Here is my module versions -

• “history”: “^4.6.3”
• “react-redux”: “^5.0.5”
• “react-router”: “^4.1.2”
• “react-router-dom”: “^4.1.2”
• “react-router-redux”: “^5.0.0-alpha.6”

Is there any guideline/implementations for this ?

Thank you in advance!

[kctang]

I had a similar issue today. I noticed it was my configuration issue with react-router-redux 5.x (used with react-router 4.x).

Pay close attention to README’s usage guide. Key things to lookout are (see the README’s code for details):

• Combine routerReducer with a key of router when creating the store.
• Apply routerMiddleware when creating the store (I forgot this).

Once that is done, you should be able to navigate to another route by calling push from an epic like this:

action$ => action$
  .ofType('myActionType')
  .mapTo(push('/my-route'))

Notice that I call push() (this function returns RouterAction) within mapTo(). This is to avoid dispatching from within the epic (i.e. anti-pattern mentioned above).

[slyfox42]

For anyone struggling with this, I had a similar problem when calling the push method from within an epic. I could see the action ‘router/CALL_HISTORY_METHOD’ in redux dev tools but the actual URL wasn’t being changed. The problem simply was that middlewares were being applied to the redux store in the wrong order. This is the working store configuration

import { applyMiddleware, compose, createStore } from 'redux'
import { createEpicMiddleware } from 'redux-observable'
import { routerMiddleware } from 'react-router-redux'
import history from './history'
import rootEpic from '../epics'

let middlewares = []

middlewares.push(applyMiddleware(createEpicMiddleware(rootEpic)))
middlewares.push(applyMiddleware(routerMiddleware(history)))

createStore(rootReducer, undefined, compose(...middlewares))