Redux: Don't mutate. But Do Reuse.

-
When I started learning Redux, I thought I had to clone my whole state tree before changing it in my reducer function. But this is not true (and is bad for performance).

But I wasn't sure how to reuse parts of the old state without "mutating".

After learning more, I think I see a practical version of the "don't mutate" rule which is:

The Rule: Code that starts with a reference to the old state object can never be allowed to see any changes.

Therefore, if you will change something somewhere out on a branch of the state tree, all of the change's parent objects must be new. (So, the root of the new state tree is always a new object.)

But, branches without changes can be reused. Because code starting from the old root can safely traverse onto those branches because they contain nothing new.

And the above also means that children of a changed node can be reused, as long as those branches have no other change.

Of course, this all depends on your state actually being a tree. Otherwise, it's much more complicated. So, make sure your state is a tree. Not a random graph. Maybe a DAG, if you want to think really hard. But I don't want to think that hard. So I will just make it a tree.

PS: Making sure that my state is a tree probably means I will have to use some IDs, instead of object references, when I want data to be "on" multiple branches

PPS: I'll update this with any additions or corrections I find. And please comment below if I got anything wrong. Thanks!


Comments

Post a Comment

Popular posts from this blog

Callback, Promise, Observable, and Doughnuts

-
This is the story of Jerry JavaSript's Automated Slow Doughnut Shop. One day, I wanted a doughnut. So I rode my bike to the automated slow doughnut shop, where they have a slow doughnut machine. You put in a dollar. And then the machine mixes batter, heats the fat, drops the batter into the fat, lifts it out on a linked metal conveyor belt, dusts it with sugar, and drops it into your waiting hands. Once I get my doughnut, I can eat it in the usual manner. But from the time I put in my dollar until the time I receive my doughnut, I am blocked. Fortunately, the slow doughnut machine has a slot labeled, "Insert callback  here". This is great. I code up a function eatDoughnut(doughnut) . I can reference my teeth,  esophagus, stomach, and so on, because they are mine and I know all about them. And then I slip my   eatDoughnut(doughnut)  function  into the slot and get on my bike and ride  to the office while the slow doughnut machine is still mixing batter. When the
Read more

Learn grid and grid-template-areas FIRST!!!

-
If you're starting to learn web design, you will see hundreds of tutorials about floats clear-fix and positioning and other infinitely painful details on how to actually get HTML and CSS to lay things out in seemingly normal and obvious ways. You'll probably have to learn some of that. But don't learn it first! Instead , read this  https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids And then read this  https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas and a longer tutorial here  https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas Then lay out your web pages as if layout was something we were actually allowed to do. (And then go back and learn some of the painful stuff later. Or if enough time has passed, maybe you won't have to.)
Read more

The Day TDD Started Working for Me

-
I've always agreed that Test Driven Development was a good idea and I should be doing it. But it's hard to do on top of learning new tools. And it's hard to do for GUIs. So it never quite happened. However, after I worked with React and Redux a bit, and after doing a couple hello-world tests with Jest, it all fit together and actually made coding easier and more fun. These were the parts that came together to make it work: Jest: Jest is included with create-react-app and is stupid-easy to start using. The Redux reducer, or functions used in the reducer, have to be pure functions and are therefore stupid-easy to test. I pulled some functions out of Redux Container mapStateToProps. These are also pure functions. I also decided that the outputs from mapStateToProps had to have the same structure, and even use most of the same names, as the container component and all of it's child components. In other words, you could dump the data coming out of mapStateToProps a
Read more