A small trick to write clean reducers

Writing react-redux reducers might be sometimes painful. Specifically, you might have to write lots of boilerplate code just to change one value or flag in a nested object. We will see how a small trick can help us reduce this code. TLDR: you can use lodash/fp/set to modify a deep attribute in your store in an immutable way. for example with and then use such as with import set from 'lodash/fp/set' set(path,_value_, state) _s_et(`manufacturers.${manufacturer}.models.${model}.options.colors.${color}`, true)(state) Current Situation When you are writing react-redux reducers, you must be careful about not mutating objects in the store. This is not 100% true in a simple react application, but since you are probably using some shallow comparison of props somewhere in your apps, this is true. This is the case if you use come kind of , or using connect with functions, or any other way where you could use plugged to your store. If your are not, you probably should. PureComponent react-redux mapStateToProps reselect Some people love to use object in their store. If that’s your case and are happy with it, then you don’t really need to go further in the article. Personally, I prefer to deal with regular JS object in my store. I indeed found doing conversion between plan object JS object and Immutable to be cumbersome. Immutable.js So, in order to write my reducers so they won’t mutate object in the store, and using regular JS object, here how I used to write my reducers. You can probably find other ways to write this in a way you like better, or even argue that the shape of my store could be changed to better suit this operation, but still, there is time when you have to modify a deep attribute in your store. redux I guess at this point you understand why I wanted to get a better solution. I will present one, but if you have other options, I will be happy to see it in comments ;) Finding a solution Now that our problem is correctly stated, as a good lazy programmer that you probably are, you must be wondering if there is a solution to this specific need. There is none as far I know. Again, feel free to correct me, or create one based on this article. Actually, the last section should be also interesting for you in that case. Long story short, I’ve been looking for a solution to this problem, and since people I work with are terrible fans of , I thought there might be a solution here. I already knew the method, which is useful to set the value of attributes in nested objects. The problem with the regular version of the set method, is that it will mutate the object on which we set the attribute. As we said in introduction, this is not something that we want here. Basically what I was looking for was an immutable version of set. l odash set I am glad I was not the only one. The first result of this quick search was the trace to follow As you can see on the above screenshot, my now hero , asked as a issue two years ago. answered immediately that it will come in , and confirmed that more recently, even giving the syntax that we could use for “ Rico Sta. Cruz this question lodash John-David Dalton l odash/ fp Kyle Kelley Redux style state setting” After that, I wanted to check if this solution was used and recommended in the react community. I did a very quick check, but did not found much reference to it. Nevertheless, I found one example, written by the now famous in . Dan Abramov this stackoverflow post Extract from , available as gist Dan Abramov post on stackoverflow here I think that we now have our answer: you can use function as an helper in a reducer in order to avoid useless code. This is even done by someone from the community whose talent is recognized by lots. lodash/fp/set react-redux Going further ? I won’t detail much here how you can use set to modify an object inside an array. In fact, it is already done in the previous sample. If you want modify several properties in the same time, I believe you can also use or to do so. lodash/fp/merge lodash/fp/defaultsDeep Also, I told you previously that was able to modify object in an immutable way. This the case. What you also want be sure, is that it will copy only objects that are needed, but will keep references for objects which are not impacted. This is also the case: you are safe, using will not lead to useless rendering. lodash/fp/set lodash/fp/set Another topic which is useful to highlight here is performance. Overall, has great performances. Nevertheless, If this is a really important matter to you, I believe there are way to be faster that here. The immutability around is done as a layer around the initial implementation of methods, here .This lead to the object traversal being done more than one time: the run-time complexity is bigger than it needs to be. Actually, I created a minimalist implementation of such an immutable set function that will work with only one iteration lodash lodash lodash/fp lodash lodash set I compared this implementation to , and despite being very naive, it seems to outperform it, if I believe . lodash/fp/set this jsPerf test jsPerf results of lodash/fp/set vs the naive implementation shown previously, transpiled with babel This make me think that there is a room for creating a library dedicated to this use case and more. The closest I found so far is , which is more a wrapper around the store so you don’t have to write reducer, but for different reasons, I would not recommend it. reduceless