Open cpsubrian opened 8 years ago
A quick addendum: No matter where I put my original middleware chain, everything 'functions', but I get different things logged (either everything but the historyAPI actions, or only the historyAPI actions).
I ran into a related issue when dispatching a pushState
action within redux-thunk
export const updateQuery = (query) => {
return (dispatch, getState) => {
const { router } = getState()
dispatch(pushState(null, router.location.pathname, query))
}
}
With this configuration:
const coreMiddleware = compose(
reduxReactRouter({ routes, createHistory }),
applyMiddleware(
thunkMiddleware,
apiMiddleware
)
)
dispatching updateQuery
has @@reduxReactRouter/historyAPI
action type coming out the other end and fails to change the url state
Re-ordering:
const coreMiddleware = compose(
applyMiddleware(
thunkMiddleware,
apiMiddleware
),
reduxReactRouter({ routes, createHistory })
)
now has updateQuery
spitting out @@reduxReactRouter/routerDidChange
and correctly changes state.
like @cpsubrian, not sure if this is simply a gotcha that could use documentation or an issue to be looked into. hope that helps.
Can confirm this issue, my working order of things is now:
const createComposedStore = compose(
reduxReactRouter( { routes, createHistory } ),
applyMiddleware( thunkMiddleware, apiMiddleware, historyMiddleware, loggerMiddleware ),
devTools()
)( createStore );
Noticed no problems in calling the router before applyMiddleware
.
Interesting .. when I didn't have a logger before and after the router, I was missing some of the dispatches.
I guess am experiencing the same situation.
Store:
const logger = createLogger()
const createStoreWithMiddleware = compose(
applyMiddleware(thunk, logger),
reduxReactRouter({ createHistory })
)
Async Thunk action
export function logoutAndRedirect() {
return (dispatch, state) => {
dispatch(logout());
dispatch(pushState(null, 'login'));
}
}
Resulting Log ( Correct )
Navigating without pushState ( Link component )
<Link to="/orders" className="navigate-right">
Order List
</Link>
The Link component changes the url, the historySynchronization dispatches a routerDidChange action which does the right changes but is not executed through the middles defined on the app hence not captured by the log middleware.
Is there a way to navigate using the Link component and still get the right actions on the log without having to mess with the middlewares?
Same issue here. if store is like
const store = compose(
applyMiddleware.apply(null, [createSagaMiddleware()]),
reduxReactRouter({createHistory: createBrowserHistory}),
devTools()
)(createStore)(transducers(reducers), initialState)
Then I can't see routerDidChange action in saga.
if store is like
const store = compose(
reduxReactRouter({createHistory: createBrowserHistory}),
applyMiddleware.apply(null, [createSagaMiddleware()]),
devTools()
)(createStore)(transducers(reducers), initialState)
Then I can see routerDidChange action in saga, but I can't dispatch push action to change url in saga.
Is it safe to do this to get both push
and routerDidChange
working with redux-saga
?
const store = compose(
reduxReactRouter({createHistory: createBrowserHistory}),
applyMiddleware.apply(null, [createSagaMiddleware()]),
reduxReactRouter({createHistory: createBrowserHistory}),
devTools()
)(createStore)(transducers(reducers), initialState)
Any news on whether this is resolved?
Any updates on this ?
Not sure if this is just a gotcha to be documented or an actual issue...
TLDR I needed to put
thunk
andpromise
middleware before the router and I had to put mylogger
middleware before AND after the router (and make sure I only log the same action once). This is due to the routerhistoryMiddleware
not calling next() (which is probably correct).Before
I'm creating my store with the following code. With my middleware chain before the router, everything works fine except I don't get any logging of
@@reduxReactRouter/historyAPI
actions, which is totally predictable because if the historyMiddleware catches one of those it triggers a state change and the rest of the middleware does not fire. This is not a problem per-se but my preference is to log all actions during development so I can really see whats going on in the app.store.js
transducers/index.js
reducers/index.js
middleware/index.js
After
To accommodate my logging needs, I split my middleware into a 'before' chain and an 'after' chain like so:
middleware/_before.js
middleware/_after.js
middleware/logger.js I added a check to make sure the same action doesn't get logged twice.
store.js (changes)