What is Redux and why is it important in Web development

By definition, Restored is a “predictable state container for JavaScript applications.” To understand what this means, we need to clarify some of these definitions.

First, let’s jump to “state”. In terms of programming and applications, a state represents everything combined to keep an application running.

Next, we add the term “predictable”, which gives us a consistent state regardless of the environment in which it runs.

Now we can create a “container” layer, which is a fully encapsulated application that includes everything it needs to run.

Therefore, a predictable state container is a containerized application that is capable of remaining in a consistent, running state. Of course, with Redux we are talking about an application written in JavaScript.

A deeper look at the states

Consider this: you use App X on your smartphone, do some things with that app, and then switch to App Y and do different things. When using App Y, you realize you forgot to do something with App X and go back to the first app. When you reopen the original app, it will be in the same state it was in when you last exited it.

This is state. But wait, there's more.

There are three principles to consider for the state:

• An application's state is always stored in a single JavaScript object.
• Although the state is read-only, it can be changed by describing the change using a JavaScript action.
• Changes to a state are executed by a reducer function, which accepts the current state and, through an action, returns the new state (if there is a change) or the original state (if there is no change).

This is mostly basic stuff. Redux is much more than that.

What is Redux?

Redux started when Facebook started having problems with the Model-View-Controller framework, which is a software design pattern that separates an application into three components: Model (data-related logic), View (UI logic for a application) and Controller (interface between Model and View). When Facebook needed to do massive scaling, the MVC framework began to fail.

At this point, Facebook released Flux, which is a one-way method of updating the View component and handling user-based actions.

In June 2015, Dan Abramov created Redux, which is based on Facebook's Flux and the Elm programming language. The big change Abramov made to Redux was that he only used a single store and removed the dispatcher.

A store is a way to persistently store and manage collections of data. Flux used multiple stores, Redux just one. So if you have multiple components in an application, there is only one store that manages the state of the components. This storage can relay any state to any component, making it an incredibly effective and efficient model.

The dispatcher is a special program that communicates with a scheduler and takes a process to the desired state.

Is Redux a framework?

In short, no. Rather than being a traditional library or framework, Redux is an application dataflow architecture. To use Redux it is recommended that you work with the Redux Toolkit but the fundamental building blocks of Redux are:

• Action
• Reducers
• Middleware
• Store

A software framework is a development platform that can include code libraries, a compiler, and the tools needed to build complete applications. Redux, on the other hand, is simply a JavaScript library with a single task: managing state in JavaScript applications.

So instead of building applications with Redux, you use it to ensure that your JavaScript application states can be managed.

Redux development is also commonly used with libraries like React and Angular. With these combinations it is possible to develop user interfaces that depend on a desired state.

And while you can write a complete application using a framework, when that application starts to become increasingly complex, using a framework to manage that application's ever-growing list of components and states can become very complicated, if not impossible.

This is not the case with Redux.

What is Redux used for?

In programming terms, you would use Redux for applications where data is shared between components. For example, you have an application that uses a login component. Data from the login component is shared with the status component. Most apps that use Redux are mobile apps (with exceptions, of course). Some examples of applications that use Redux are:

• The Firefox debugger.
• Franklin: a DNA sequence annotation tool.
• CMS Portfolio: Rails-based CMS and blogging tool.
• GitHunt: Reddit for GitHub.
• Datamaps: a platform for map visualizations.
• Glsl Live Editor: a WebGL shader editor.
• Favesound: A Soundcloud player.
• Podbaby: a web podcast client.
• Gitchecker: Displays the status of GitHub projects.

Less obvious uses for Redux are:

• UI State
• Form data
• API Data
• Automatically persist and rehydrate a state

More impressive, however, is the list of companies currently using Redux. This list includes things like:

• Instagram
• Robinhood
• Day off
• Dash Door
• Patreon

Is Redux Frontend or Backend?

Before we answer this question, let's define frontend and backend in simple terms.

• Frontend is the user interface or client software.
• Backend is the server.

With that out of the way, is Redux used for front-end or back-end development? The easy answer is “both”. Redux can be used for any application that places a high priority on the ability to store state.

It should be clear that Redux can be used for client-side (frontend) user interfaces. However, since Redux is just JavaScript, it can also be used on the server side (backend). This may seem counterintuitive considering that the backend has traditionally aimed to be stateless .

A good example of using Redux in the backend is multiplayer games that run in a browser and need to store their state on the server to ensure that all players have the same view of the game. In this case, the server holds the state and is seen as the “sole source of truth”.

Is Redux relevant?

There have been many blog posts and comments that indicate that Redux is dead or that another tool has replaced Redux. In fact, Redux is still very relevant. And with the official Redux Toolkit package (which wraps the Redux core and provides utilities to simplify a number of common Redux use cases), it's easier than ever to employ this JavaScript library.

If you liked this, be sure to check out our other articles on web development.

• What is Sustainable Web Design and why it matters
• What is Web Design?
• Why your business should use custom websites
• Why You Need to Add a Support Bot to Your Website
• Why You Need to Care About Your Website Vitals