redux Asynchronous Data Flow Middleware

Help us to keep this website almost Ad Free! It takes only 10 seconds of your time:
> Step 1: Go view our video on YouTube: EF Core Bulk Extensions
> Step 2: And Like the video. BONUS: You can also share it!

Example

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)
);


Got any redux Question?