If you’re new to the world of web development, you may have heard of the name and are wondering, “What is Redux?”
Essentially, Redux is a JavaScript library that helps manage the state of your application. “State” here means the data or variables that determine the current behavior and information shown to the user. For example, the contents of a shopping cart.
State is often managed directly in the components that display the data. For example, a component might store the current value of a form input in its own state, and update that state as the user types. As applications grow in size and complexity, managing this state can become difficult. This is where Redux comes in.
In this article, we’ll go over what Redux is and explain its key features. We’ll also talk about what redux is used for and discuss some common use cases.
To jump directly to a specific section, you can click on a heading below:
1. What is Redux?
Redux is a popular Javascript library used to manage state in web applications.
It was created by Dan Abramov around June 2015, inspired by Facebook’s Flux and functional programming language Elm. It’s particularly well-suited for applications with many different components that need to share data.
2. What is Redux used for?
What is Redux used for, you ask? Well, let’s say you have a lot of user data that controls how your web application behaves.
To go back to our eCommerce example, this could be the items in your shopping cart, suggested items, what page you’re on in a list of products, or the result of a search. Redux manages all this data by keeping it in one single place, called the “store”.
Advantages of using Redux
The main advantage of using Redux is that it provides a predictable way to manage state in your application. By making all state changes go through a central store, it’s easier to understand how the application’s state is modified.
Having this single source of truth makes it much easier to debug any issues that come up. It’s also easier to test, and to reset the store to a known initial state.
When using Redux along with JavaScript library React, you can also manage state for React components. This makes it easier to build more complex, interactive applications with React. Using Redux also gives you a clear way to access and update the state of your individual components.
Disadvantages of using Redux
One major downside of Redux is that it adds a lot of extra boilerplate code. You need to set up a store and manage reducers, in addition to your regular code. This adds complexity to your application, meaning more setup time and maintenance.
Redux also introduces less flexibility in handling data. It’s more opinionated with its predictable way of managing state, both a plus and a minus depending on your needs. The lack of flexibility might help prevent bugs, but could also be a disadvantage in certain situations.
3. Redux FAQs
Now that you know what is Redux and its pros and cons, let’s go through some commonly-asked questions about the tool:
Is Redux frontend or backend?
Redux is a framework used on the frontend of a web application. It’s a way to organize data in its store that controls the elements users see and interact with in the browser.
What are 3 main concepts of Redux?
The three main concepts of Redux are the store, actions and reducers. Let’s take a brief look at each:
- The store: This is your single source of truth for your application’s state. It’s a big object that contains the current state of your application, and the central place where all state changes are made.
- Actions: Actions are objects that indicate an intention to change the state of your application. Actions get dispatched to the store. From there, the store uses them to determine how to update its state.
- Reducers: Reducers are pure functions. They take in the current state of the store and an action, and return a new state. They’re responsible for updating the store’s state. They use actions as information to do this. The Redux state should never be modified directly.
Understanding these three core concepts of Redux is key to using Redux effectively in your application.
Where is Redux stored?
Redux keeps the state of the entire application in a single object, called the store. This store is a JavaScript object that provides methods for updating that state. The Redux store is created using the createStore function from the Redux library.
Why is Redux good with React?
Redux was originally designed to be used with React, so Redux is certainly good with React. The two libraries are often used together to build complex web applications.
For example, the Redux library includes a set of utility functions that make it easy to integrate Redux with React. The connect function is one example. Using connect, you can connect a React component to the Redux store. This allows the component to receive updates to the store’s state as props. This makes it easy to use Redux to manage state for React components.
Redux can also be used with other JavaScript frameworks though, even with vanilla JavaScript.
What is Redux Thunk?
Redux Thunk is a solution for handling asynchronous code with Redux. Instead of returning an action, Redux Thunk allows you to write action creators that return a function. This means you can now perform an asynchronous action, like making an API call, before dispatching an action.
To use Redux Thunk, you need to install it as a dependency and apply it to your Redux store using the applyMiddleware function.
What is Redux Saga?
Redux Saga also allows you to handle asynchronous code with Redux. The main difference is Redux Saga has a different approach to handling this asynchronous logic, based on generator functions.
With Redux Saga you write “sagas”. A saga is a generator function that listens for specific actions and performs asynchronous logic when those actions are dispatched. Sagas are implemented using generator functions, which are functions that can be paused and resumed.
Redux Saga also provides a way to handle failures and errors using the try/catch pattern.
4. How to use Redux
Knowing what is Redux used for is not quite knowing how to employ the tool itself. Here’s a short summary of how to use Redux in your web application:
- Install the Redux library.
- Create a store using the createStore function from the Redux library. You will pass the store a reducer function. This is a pure function that takes in the current state of the store and an action, and returns a new state.
- Dispatch actions to the store using the dispatch method and passing it an action object. The store will use the reducer function to update its state based on the action that was dispatched.
- Connect components to the store. The connect function takes two arguments: mapStateToProps and mapDispatchToProps. You can then use the props that are passed to your component to access the store’s state and dispatch actions.
Wrap-up
By now you have an idea what Redux is, what state is, and how Redux is useful for managing complex state in a web application. Redux is a popular library many projects and companies use to manage state and side effects, with a big community and great documentation. It’s certainly worth trying out in a future project if you are new to it.
Students of CareerFoundry’s Full-Stack Development Program get to grips with Redux and React as part of their learning. As part of their studies, they have to build the frontend for their own API using React and Redux. This project, along with several others, will go into their web developer portfolio to enable them to attract employers once they graduate.
If you’re interested in reading more about JavaScript and the world of software engineering in general, check out these articles: