By definition, Redux is a “predictable state container for JavaScript apps.” To understand what that means, we need to clear up a few of those definitions.
First, we’ll skip to “state”. In terms of programming and apps, a state represents everything combined to keep an application running.
Next, we add the term “predictable”, which then gives us a state that is consistent, no matter the environment it is run in.
Now we can layer on “container”, which is a fully-encapsulated app that includes everything necessary to run.
So a predictable state container is a containerized app capable of remaining in a running, consistent state. Of course with Redux, we’re talking about an application written in JavaScript.
A Deeper Look into States
Consider this: You use Application X on your smartphone, do some things with that app, and then switch to Application Y and do different things. While using Application Y, you realize you forgot to do something with Application X, so you go back to the first app. When you reopen that original app, it’s in the same state it was when you last left it.
That’s state. But wait, there’s more.
There are three principles to consider for state:
- The state of an app 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, by way of an action, returns either the new state (if there’s a change) or the original state (if there is no change).
That’s mostly basic stuff. Redux is much more than that.
What is Redux?
Redux started when Facebook began having problems with the Model-View-Controller structure, which is a software design pattern that separates an application into three components: Model (data-related logic), View (UI logic for an application), and Controller (interface between Model and View). When Facebook needed to do massive scaling, the MVC structure began to fail them.
At that point, Facebook released Flux, which is a unidirectional 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 changes Abramov made in 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 only one. So if you have numerous components in an application, there is only one store that manages the state of the components. That store can relay any given state to any given 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. Instead of being a traditional library or framework, Redux is an application data-flow architecture. To use Redux it’s 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 may include code libraries, a compiler, and the necessary tools to build complete applications. Redux, on the other hand, is simply a JavaScript library with a single task—managing states in JavaScript applications.
So instead of building applications with Redux, you use it to ensure your JavaScript application states can be managed.
Redux development is also commonly used with libraries such as React and Angular. With these combinations, it’s possible to develop user interfaces that depend on a desired state.
And although you could write a complete application using a framework, once that application begins to become more and more complex, using a framework to manage the ever-growing list of components and states in that app can become very tricky, if not impossible.
That’s not the case with Redux.
What is Redux Used For?
In terms of programming, you would use Redux for applications where data is shared among components. For example, you have an app that uses a login component. The 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 apps using Redux are:
- The Firefox debugger.
- Franklin: a DNA sequence annotation tool.
- Portfolio CMS: 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 status for GitHub projects.
Less obvious uses for Redux are:
- UI state
- Form data
- API data
- Persist and automatically rehydrate a state
More impressive, however, is the list of companies that currently use Redux. That list includes the likes of:
- Robinhood
- Slack
- DoorDash
- Patreon
Is Redux Frontend or Backend?
Before we answer that 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 frontend or backend development? The easy answer is “both.” Redux can be used for any application that places a high priority on the ability to store states.
It should be clear that Redux can be used for the client side (frontend) with user interfaces. However, since Redux is just JavaScript, it can also be used on the server side (backend). That might seem counterintuitive, considering the backend traditionally aims to be stateless.
One good example of using Redux on the backend is with multiplayer games that run within a browser and need to store their state on the server to ensure all players have the same view of the game. In this instance, the server holds the state and is seen as the “single source of truth.”
Is Redux Relevant?
There have been a lot of blog posts and comments that indicate either Redux is dead or that another tool has replaced Redux. In fact, Redux is still very much 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 enjoyed this, be sure to check out our other web development articles.
