Redux is one of the most hotly discussed topics in the web development community. I hope I can explain why it is so useful, and even needed by some projects, in this post.
Did you know that Redux can be combined with different web frameworks such as React? It is not a built-in part of these libraries but it can be connected to them in such a way that they work in harmony.
There are a few preliminary concepts I would like to cover about state and best practices for managing it.
Data types of state
First, I strongly believe that all state variables should have a data type attached to it in order to enforce state consistency checks. You don't want a string input to be treated as a number for example. And while it's not required to have enforceable data types to use Redux, or anything else for that matter, it makes you feel good that you won't have to deal with bad input.
Where is your state stored?
A location to put all of your variables is very important, and it's more of a "semantic" problem than a programming problem, in the sense that there are several right ways to arrange your state variables, but there are also several wrong ways to do it which make your program harder to maintain.
Things will be more clear with an example. Let's say all of my program state is in a single JSON object. Then it can have numbers, strings, hash tables and arrays and any other object that can be serialized. But I could also just put each bit of state in its own Javascript/Typescript variable and that also works. Further still, I could have some variables in one file and have auxiliary variables that depend on the values of the main variables, all being stored in a shared space like the browser's local storage or a key-value store like etcd.
I can also design my program to make each variable dependent on the value of the others, but that is definitely not a good idea.
In these scenarios, I arrange some variables to have dependencies on others, or lack thereof. Even in the JSON example, child nodes have a dependency on parent nodes. If a value for the parent node is not present the child nodes expectedly disappear.
Creating, deleting, reading and writing state
Next you have the issue of which variables should be read-only and should be permanent and non-deletable. Read-only state is desirable in some applications, and although you can program your app to not ever write into variables that are meant to be read only, it's nice to have a symbolic diagram of the read-only and writable variables, as well as which ones may be deleted and/or created again. This could be useful if another developer is in charge of inventing the state model.
Redux
First some history about Redux: It is a Javascript library created in 2015 by Dan Abramov while preparing a talk at a React conference. It is based on items from the Flux library. Over the years, Redux has been very stable and hasn't got many extra features since its creation which is good for an API that is used in hundreds of different projects.
Now let's look at the main features of Redux:
Redux Store: This is a storage space provided by Redux to store all the state in In Redux, all state is stored in a single object. They call this a single source of truth or a storage tree.
This storage tree holds not only the state but also the methods that act on the state, and that's the nice thing about Redux's stores, they put the methods alongside the data they operate on just like a class would do.
The state itself is read-only and can't be changed by a simple assignment operator. You must use a specific updating function to update a particular state variable. This function is a pure function which means it does not change the original state object, it creates a new state object with the changes. These functions are also called reducers.
And we're done (for now)
I hope in this article you learned how Redux can be useful for managing state, even though I did not show how to program it yet. Hopefully I will be able to do so in a subsequent post!
If you see any incorrect information in this article, please let me know so I can fix it.
Top comments (0)