When I first started working on React/Redux, the very first choice of library I used for handling asynchronous actions was Redux Thunk as its maintained by the authors of Redux, and is very popular as well. Consider the following example, where an action type is being created for incrementing a counter and a corresponding action creator for it.
\nconst INCREMENT_COUNTER = 'INCREMENT_COUNTER';\n\nconst increment = () => ({\n type: INCREMENT_COUNTER\n})Using redux thunk, an async action creator can be created as follows
\nconst incrementAsync = () => {\n return dispatch => {\n setTimeout(() => {\n dispatch(increment());\n }, 1000);\n };\n}Pretty simple till now.
\nRedux Thunk is easy to understand, but the problem arises when the application scales, and as the need for dispatching condition-based actions grows with the application, it leads to unmaintainable code. For example, consider the below code
\nconst makeSandwichesForEverybody = () => (dispatch, getState) => {\n if (!getState().sandwiches.isShopOpen) {\n return Promise.resolve();\n }\n\n return dispatch(\n makeASandwichWithSecretSauce('My Grandma')\n ).then(() =>\n Promise.all([\n dispatch(makeASandwichWithSecretSauce('Me')),\n dispatch(makeASandwichWithSecretSauce('My wife'))\n ])\n ).then(() =>\n dispatch(makeASandwichWithSecretSauce('Our kids'))\n ).then(() =>\n dispatch(getState().myMoney > 42 ?\n withdrawMoney(42) :\n apologize('Me', 'The Sandwich Shop')\n )\n );\n};In the above code, there are too many callbacks and the code does not look clean. Also, it would become complex if more conditions are added to it later on. Then, how to simplify this?
\nFor our customer-facing websites like wirkaufendeinauto and AutoHero, we are neither using Redux Thunk nor Redux Saga. Rather, we are using a very simple and lightweight npm module Redux Actions Generators developed by our very own Alexander Afonin, who works as a Senior Software Engineer at Auto1.\nIf this module is configured as a middleware in the React application, the above code can be simplified as shown below
\nconst makeSandwichesForEverybody = () => function* ({ getState }) {\n if (!getState().sandwiches.isShopOpen) {\n return;\n }\n\n yield makeASandwichWithSecretSauce('My Grandma');\n yield [makeASandwichWithSecretSauce('Me'), makeASandwichWithSecretSauce('My wife')];\n yield makeASandwichWithSecretSauce('Our kids');\n\n if (getState().myMoney > 42) {\n yield withdrawMoney(42):\n } else {\n yield apologize('Me', 'The Sandwich Shop');\n }\n};Now you are ready to tackle the growing complexity with ease. Also, the code is clean and readable.
\nOne question that might arise is that why not use async/await with thunk actions which could have solved the problem that is being discussed earlier. But, there are advantages of using generators instead of async/await thunks which are listed below -
\nRedux Thunk returns promises, which are more difficult to test. Testing thunks often require complex mocking of the fetch API, Axios requests, or other functions. With generators, you do not need to mock functions wrapped with effects. This makes tests clean, readable and easier to write.
\nThe best part about the Redux Actions Generator module is that you can catch all errors at one place, without the need to write multiple try catch blocks in different actions ( you can if you want to, but not mandatory ) With redux-thunk, this is not possible and you have to write error handlers everywhere, which makes the code look less readable.\nTo use this common error catching functionality, you can configure it while creating the store as shown below -
\nconst catchError = error => console.error(error); \nconst middlewares = applyMiddleware(createGeneratorMiddleware(null, catchError));Once you do this, your actions can become clean and more readable. For example, the below code...
\nconst someAction = () => function* ({ api }) {\n try {\n yield api.loadSomeItems();\n } catch (error) {\n // handle error logic\n console.log(error);\n }\n}can be replaced with...
\nconst someAction = () => function* ({ api }) {\n yield api.loadSomeItems();\n}In this way, all the uncaught errors will be caught with the catchError function.
Let's get to some real life example on how we use this pattern in our code. Consider the Auto Kaufen page on our wirkaufendeinauto website where we show a list of ads, filters, header, footer and some other content.
\nFor this module, we have some actions like
\nconst loadAds = (filters) =>\n function*() {\n // filter is an object with some information like {make: 'Audi', model: 'A3'}\n \n const { ads: result } = yield api.findAds(filters);\n\n // Once we get the ads list, we just save it in the redux store\n }\n\nconst loadSimilarAds = (filters) =>\n function*(){\n // this is same as loadAds, but the API endpoint from which it fetches data is different\n }Similarly, we have other actions like loadDataFromCms, trackGtmEvents etc. Now the action which will be called when the main component mounts, will be as shown below
export const loadPage = () => \n function*({ getState }){\n yield loadDataFromCms('header');\n\n const filters = yield getFiltersFromStore(getState());\n yield [\n loadAds(filters),\n loadMakeModelSubtype(filters),\n loadDataFromCms('home')\n ];\n\n // If no ads found, we try to find similar ads which might interest the user\n if( getState().ads.length === 0 ) {\n yield loadSimilarAds(filters);\n }\n }As you can see, in the above code we are making multiple API calls, some are in parallel, and some are fired conditionally based on the results of the previous API calls. This way our redux actions look clean and are easy to debug and maintain.
\nSo this is how you can make use of the ES6 generators to simplify your React application code. Comments and suggestions are welcome.
","fields":{"slug":"/es6-generators-react-redux/","tags":["auto1","engineering","react","redux"]}}}]}},"pageContext":{"slug":"/tags/redux","tag":"redux","categories":["Architecture","Coding","DevOps","Engineering","ProjectManagement","QA","Social","TechRadar"]}}