{"componentChunkName":"component---src-templates-blog-post-js","path":"/async-dispatch/","result":{"data":{"site":{"siteMetadata":{"title":"Ibrahim personal blog","author":"Ibrahim"}},"markdownRemark":{"id":"709376be-bbc1-5029-abd4-dd9622759b88","html":"
\n

async-dispatch is a middleware can be added with no time to privilage the asynchronous into your store

\n
\n

For more informatiom about the future of redux-logger, check out the discussion here.

\n

Table of contents

\n\n

Install

\n

npm i --save async-dispatch

\n

Usage

\n
import asyncDispatchMiddleware from \"async-dispatch\";\nimport { createStore } from \"redux\";\nimport { applyMiddleware } from \"redux\";\n\nconst store = createStore(\n  rootReducer,\n  applyMiddleware(asyncDispatchMiddleware)\n);\n// Note passing middleware as the third argument requires redux@>=3.1.0
\n

Then applying this middleware is simple as

\n
const LoginReducer = (state = intialState, action) => {\n      login(action.userData).then((data) => {\n        if (data.error) {\n          action.asyncDispatch({\n            type: actionTypes.ERROR,\n            message: data.error,\n          });\n        } else {\n          action.asyncDispatch({\n            type: actionTypes.SUCCESS,\n            user: data,\n            message: \"Logged successfully\",\n          });\n        }\n      });\n      return { ...state };\n})
\n

To Do

\n\n

License

\n

MIT

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