What is Redux Used for and How it Helps Us to Do Better Work

As a web developer, you might be tempted to try out new tools and experiment with the latest tech whenever the situation presents itself. However, it might not be the smartest idea to immediately pick up a new utility and start messing around with it before you fully figure it out first.

By “figuring it out”, we mean taking the time to learn about all the pros and cons that come with adding a new tool. The problems you could create for yourself by picking up a utility before learning prior about it, can easily make your work meaningless.

Redux is no exception. Even though this is not a new solution, it’s still fairly young and a lot of devs don’t have much experience with it.

Redux quickly rose to stardom in the JS community. But, if you don’t have a firm grasp of what Redux is about and how to properly use it, you might run into a couple of issues that will make your experience with this tool difficult.

In this article, we at Share IT are going to introduce you to Redux and its many benefits. We’re going to show how we use this tool and what we believe are its biggest benefits.

The Basics of Redux

One of the coolest things about this tool is its size. It is super lightweight (~2KB, including dependencies), so you don’t even have to think about your app asset sizes.

What is Redux Used for and Why Should You Care?

With Redux, the state of your application is kept in a store, and each component can access any state that it needs from this store. This is an important feature for apps that have many components and are growing bigger every day.

Without a tool like Redux, working on projects that share data between components can be extremely difficult. You would need to invest some serious brainpower to figure out where a state should live. Of course, the logical solution is to place the data in a single component, but that makes sharing among sibling components difficult.

If you’re, for instance, working in React, enabling the sharing data among sibling components means storing it in the parent component. All the changes you make to the parent component are distributed as props to the siblings.

Sounds simple, right? Well, not if you’re trying to share changes between components that are far apart in the component tree. The state needs to be lifted up to the nearest parent component and then passed to the next parent component until it gets close enough to the right parent component and its siblings that need the state. As you can guess, this makes the state difficult to maintain and it’s also less predictable. Plus, this means data gets passed to components that do not need it.

This is where tools like Redux actually come to save the day and make things a lot easier. Using this type of state management can help you solve some of the unpleasant issues that crop up when working on complex applications.

More Than Just a Band-Aid for React

The best thing about Redux is that it forces developers to work in a certain way. It forces them to follow strict rules like:

• All data must be described in clear text
• Same goes for all actions. Every change of data has to be clearly described
• The code has to function like a math formula, meaning: it must return the same result given the same input (e.g. the square of 4 is always 16 no matter how many times you run it)

This clear set of rules makes the process of development much better and easier. It allows cool features to be built, which otherwise might just feel like fiction.

In addition to that, Redux has some amazing features that make our work a lot easier to do. Here’s just a couple that we at Share IT absolutely love:

1. Undo/Redo Option

Even though this is a super powerful feature, it needs to be used with caution. It requires system-level planning, to be precise. The undo/redo records and replays every single change of data that happens in the app, so you need to think about how this fits into the architecture of your project from the very start. If you want to bring it in at a later stage, you’ll need to apply changes to a lot of files, which could transform your project into a breeding ground for bugs.

Because Redux requires every action to be described in clear text, the support for undo/redo almost comes for free. The instructions of how to implement this feature are super simple and easy to understand. It will take no longer than a couple of minutes to figure everything out.

2. Collaborative Environment

Redux is a great platform for getting more people involved with a single project and helping them stay up to date with the latest developments.

It makes it super easy to distribute updates over the network and assign/receive actions from team members who do their work on other machines. In addition to that, Redux also makes it possible to replay the changes and merge them with what’s happening locally. We at Share IT absolutely love collaborating in Redux.

3. Optimistic UI

Simply put, this sweet feature offers suggestions on how to improve the user experience of an app. It enables the app to respond faster which is definitely something that creators of real-time response apps value.

Optimistic UI works with Redux the same way Redux works with the undo/redo feature. It makes it easy to record, replay and revert changes of data when receiving a negative result from the server.

4. Advanced Debugging Feature

This is one of our favorite options that come with Redux. As a developer working on a project in this tool, you are able to run the app forward and see when a possible bug situation occurs. It is kind of like traveling into the future to see when possible issues will come up so you can prevent them from ever happening.

Amazing, right?

5. Persisting and Booting Up From State

Thanks to Redux, developers can easily save their progress in app’s storage. The moment they are ready to continue coding, the app retrieves the data as if nothing happened. This is especially useful if the coding happens in many different iterations. You can go back to the same spot - even if the system crashes, for example.

To get a clearer idea of why this is great, we can look at the game building process with Redux. In this particular scenario, developers wouldn’t have to make significant changes to their code for the save/load game progress. Only a few additional lines of code are required, which makes everything a lot easier.

Final Thoughts

Redux can truly be an awesome tool. However, the tool is only as good as its user. Obviously, there are some drawbacks to using Redux (e.g. restricted design, complexity), but we didn’t focus on them in this article. We wanted to share how we make the most of Redux and why we enjoy using it.

When you are experienced enough and have dozens of projects under your belt, it’s a lot easier to separate wheat from the chaff and utilize the tools out there - whether they are frameworks and libraries, communities, or complementary tech that makes you more productive.

If you’re in need of high-quality software development services, reach out to us at Share IT today to get a cost and time estimation.