Ad
Redux Middleware Is Being Called After Reducer
I have created a middleware like this:
export default store => next => action => {
const res = next(action)
console.log("Middleware", action.type)
return res
}
and my store configuration is:
import { createBrowserHistory } from 'history';
import { applyMiddleware, compose, createStore } from 'redux';
import { routerMiddleware } from 'connected-react-router';
import middleware from './middleware'
import rootReducer from './reducers';
export const history = createBrowserHistory();
const defaultState = {};
const composeEnhancers =
typeof window === 'object' &&
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
}) : compose;
const enhancer = composeEnhancers(
applyMiddleware(middleware, routerMiddleware(history)),
);
export const store = createStore(
rootReducer(history),
defaultState,
enhancer
);
I also have a reducer and I am seeing in the logs and debugger that the reducer is called first and then the middleware. Any suggestions on what I have configured wrong?
Ad
Answer
If I remember correctly the reducer is being called when you invoke next(action)
. Move your console.log
above that and that should give you the order of logs you want.
Ad
source: stackoverflow.com
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad