The Better State (Local State vs Redux State)

So what is redux all about?

Well redux is a state management library for JavaScript applications.We can use it in React,Angular,Vue or even vanilla javascript because redux is just a state management library. It doesn’t care what library we use to build user interfaces. But why do we need a state management library to start with. Well if you have ever built an application with a complex UI you’ve probably come across this situation where you need to keep different parts of the UI in sync. Let’s say that user changes some data in one part of the UI and other parts of the UI should be immediately updated to reflect the changes in more complex scenarios. The data can also get updated as a result of network requests or background tasks. In this situations data can flow from one part of the UI to another and change in unpredictable ways. We have to write a lot of code to keep everything in sync and when something goes wrong. Figuring out how the data changed and where it came from becomes really complex. You might even end up with an infinite loop that is hard to break. If you encountered such problems in your applications that is a sign you need a state management library.

Pros and Cons of Redux

Firstly we can easily see what exactly is going on and how the application state changes in response to every action. The second benefit of redux is that is centralizes our application state. So all the data our application needs is stored in a single place that is accessible by all parts of the UI with redux.We can also easily debug applications. We can easily cache or preserve previous state and implement, undo or redo features. So if your application needs these features, you may want to consider redux. The great thing about Redux is that it works with any frameworks. You can use it with react, angular , ember ,vue even vanilla javascript. So these are all the great things about redux. But all these great things come at a cost. Redux introduces some indirection and complexity in your code. This is partly because Redux is based on functional programming principles. Another problem redux is that Redux code tends to be verbose. You have to write some redundant code to get things done. This is one of the main complaints about redux.

Local State vs Redux State ?

A common question a lot of people have is, is it OK to have local state in our UI components or do we have to put all our state in the Redux store.One approach is to put only global data in the Redux store. So if the same data is used by multiple components, we put it in the store. So we have a single copy of this data. Another approach to organize is to put everything in the store. But this approach, we have a single way to access data. So our code will be more consistent and more maintainable. Also, we can use the store as a cache. So if the data we want is already in the store, we can just use it. We don’t have to refresh it from the server. Also, debugging becomes easier. We can use Redux Dev tools to see exactly how our applications state changes.

Also, our code becomes easier to test. So the more state we push into the store, the more we can get out of redux. Now, of course, this comes with a cost. We have to write more redux code. So if you’re using redux in a complex application, we should take full advantage of it. So I personally prefer to put all data in the store. There are exceptions like form state. Most of the time we do want to keep form state in the store for a number of reasons. First of all, in most applications, temporary values and a form have no impact on other parts of the application until the user submits the form.The more state we put in the store, the more we can get out of redux. But this doesn’t mean we should put absolutely everything in this store. Local state is fine and we should use it when it makes sense. If we’re dealing with data that other parts of the application don’t care about, like if you’re building a form, it’s better to store this data locally in a component.

Is Redux for You?

You need to understand what problem you’re trying to solve, what your constraints are, and what solution optimally solves the problem according to those constraints. If you’re on a tight budget, if you’re building a small to medium sized app with fairly simple UI and data flow, if the data doesn’t change in your app, or if you simply fetch the data on every page load and render it statically on the page, redux is probably not the right tool for you. It’s just going to complicate things and slow you down without giving you much value. So don’t use Redux or any other tools because they are popular or someone told you to always think about your needs and the kind of app you’re building.So the bottom line redux is great. It provides a number of benefits at a cost of extra complexity.You need to think about all the pros and cons of redux and see if it’s really the right tool for you or not.