Education

Bootcamps

Remote live bootcamps to lead your career onto a new path.

Web development 24 weeks

Self-study

Access all the materials from our live bootcamps and study on your own.

Web development

Courses

Upgrade your career with new skills while staying at work.

Stories
Resources
Events
For companies

Courses

Training courses for your organisation.

Training courses

Connect

Meet our graduates and build your future talent pool.

Meet our students
About us
Education

Bootcamps

Remote live bootcamps to lead your career onto a new path.

Web development 24 weeks

Self-study

Access all the materials from our live bootcamps and study on your own.

Web development

Courses

Upgrade your career with new skills while staying at work.

popcorn
Stories
Resources
Events
For companies

Courses

Training courses for your organisation.

Training courses

Connect

Meet our graduates and build your future talent pool.

Meet our students
popcorn
About us

Framework

What Is Redux?

Redux is a very popular JavaScript library that is designed to manage the state of data in JavaScript applications.

Irina Jēkabsone

Developer and Technigo alumni

LinkedIn

Although you can use Redux with different frameworks and libraries, it is most commonly used with React.

Redux can be complicated. There are a lot of boilerplates being juggled in your project in order to do a very simple thing. However, a lot of developers use Redux because when you have a large scale application you are going to need some state management tool, and Redux is the most popular of its kind.

This is Redux

Before we deep dive into Redux, for those of you who have no idea what an application ‘state’ is, it is any data that is needed to create the application UI at a certain point in time. For example, for a checkbox the ‘state’ is a true or false value for whether or not it should be checked.

Now that you know what the state is, let's see what Redux is.

Imagine that you are a customer of three banks and within each bank, you have two accounts – these are six accounts that you manage. Or, in React language, six components that contain information about the account balance, purchases made, amounts received, etc.

Without Redux to receive information about the account status or to deposit money, you have to go to each bank separately. However, with Redux you don't have to go anywhere. Because Redux takes control of the information and actions of your accounts (‘state’) away from the banks (React components) and gives it to a centralized place called a ‘store’.

Each time you want to get information about the status of accounts or perform transactions with funds, you will ask the ‘store’, which helps to keep track of all account information and perform transactions (the different states of the application).

Why Redux?

Why do we need Redux? What problem does it solve?

As we have seen before, Redux makes state management much easier. Why is it hard to manage a state?

“Managing a state in a small application is fairly straightforward. In a complex application when you have multiple components and you have to pass a lot of things, it becomes really difficult to manage. That’s when Redux comes into play.”

Let’s return to the example with bank accounts. If you have six accounts, then maybe you will still be able to track them manually, but what would happen if you had 20 accounts and six of them were in different countries? Things can quickly get out of control. In this case, a centralized system like Redux will make your life much easier.

How does it work?

As we already know, Redux is a centralised store that holds the entire state of the application. Each component has access to the store and all the steps that change the state are done through this store. Redux mainly consists of three parts which are referred to as “store”, “reducer” and “action”. Let’s briefly discuss what each of them does.

Redux Store

Redux “store” is a centralised place that holds the entire state/data of the application. This is where the application, for example, saves your username to use it in different areas. And the only way to change the state stored is to go through a “reducer”.

Redux Reducer

Redux “reducer” is a function that describes how the application´s state changes and returns a new state. But how does it know which part of the state to change? That’s where “action” comes into the picture.

Redux Actions

An “action” is just a JavaScript object that contains two parts. The first part is a type of property that describes the type of action and what it is meant to do – for example, it describes that the user has entered their username. The second part is a payload of data that contains the actual data, such as the username ‘“sara”. However, the action is not doing anything by itself. We need to send this action to a reducer by calling a method called dispatch() and passing in an action object.

Try it for yourself

It is important to learn React before you even start with Redux. React and Redux are very good matches when used together. Redux has a very well explained guide that can help you get started. Check it out here.

Learn Web Development or UX Design in 2024

Our next bootcamps start in January 2024 - apply today to secure a seat! ⚡️ Seats are filling up fast!

👉 Web Development Bootcamp

👉 UX Design Bootcamp

We're a female-founded, remote-first community helping people get a career they love. 90% of those attending our boot camps are women.