{"componentChunkName":"component---src-templates-blog-post-js","path":"/custom-async-dispatch/","result":{"data":{"site":{"siteMetadata":{"title":"Ibrahim personal blog","author":"Ibrahim"}},"markdownRemark":{"id":"02e943cf-4b38-521d-a8bd-32173b70b833","html":"

As the default dispatch provided by react-redux library is a synchronous call I needed to make calls to the server where I don’t want to make changes to the structure to the code base\nRedux docs suggests writing your own custom middleware instead and it turns out being super easy

\n
//asyncDispatch.js \n\nconst asyncDispatchMiddleware = (store) => (next) => (action) => {\n  let syncActivityFinished = false;\n  let actionQueue = [];\n\n  function flushQueue() {\n    actionQueue.forEach((a) => store.dispatch(a)); // flush queue\n    actionQueue = [];\n  }\n\n  function asyncDispatch(asyncAction) {\n    actionQueue = actionQueue.concat([asyncAction]);\n\n    if (syncActivityFinished) {\n      flushQueue();\n    }\n  }\n\n  const actionWithAsyncDispatch = Object.assign({}, action, { asyncDispatch });\n\n  next(actionWithAsyncDispatch);\n  syncActivityFinished = true;\n  flushQueue();\n};\n\nexport default asyncDispatchMiddleware;
\n

when writing middleware Store, next state and action are your parameters

\n

Then bind this middleware into your collection of middleware using applyMiddleware method provided by Redux

\n
//store.js\nimport { createStore } from \"redux\";\nimport { applyMiddleware } from \"redux\";\nimport asyncDispatchMiddleware from './asyncDispatch';\nimport rootReducer from \"./Reducer\"; \n//Your reducers either root or combined version\n\n\nconst store = createStore(rootReducer,\n    applyMiddleware(\n    asyncDispatchMiddleware\n    // your other middlewares ex thunkMiddleware orloggerMiddleware\n)\n  );\n\nexport default store;
\n

Custom middlewares are very useful because of ease of extensibility

\n

I have an even easier approach for you to implement it\n click here

\n

Good luck

","timeToRead":1,"frontmatter":{"title":"Write your own custom asyncDispatch middleware","date":"June 05, 2020","spoiler":"async-dispatch middleware","tags":"React Redux Javascript"},"fields":{"slug":"/custom-async-dispatch/","langKey":"en"}}},"pageContext":{"slug":"/custom-async-dispatch/","previous":{"fields":{"slug":"/Files-mern/","langKey":"en","directoryName":"Files-mern","maybeAbsoluteLinks":[]},"frontmatter":{"title":"Dealing with files via MERN stack"}},"next":{"fields":{"slug":"/async-dispatch/","langKey":"en","directoryName":"async-dispatch","maybeAbsoluteLinks":[]},"frontmatter":{"title":"asynchronous dispatch is now on npm packages!"}},"translations":[],"translatedLinks":[]}}}