When you call store.dispatch(actionObject)
it is handled synchronously.
I.e. reducers would be called and your store listeners would be notified, your react views would be re-rendered on each dispatched action.
Middleware is what enables you to delay dispatching or even dispatch different actions in the middle. I.e. middleware makes your asynchronous actions look synchronous.
const myAsyncMiddleware = (store) => {
return (next) => {
return (action) => {
if(action.type === "ASYNC_ACTION") {
setTimeout(() => {
store.dispatch({ type: "ASYNC_ACTION_RESPONSE" });
}, 1000);
} else {
return next(action);
}
}
}
}
const store = createStore(
reducer,
applyMiddleware(myAsyncMiddleware)
);