Introduction to Redux | Lecture 257 | React.JS 🔥

Summary

The video script provides an insightful overview of Redux, a popular third-party library used for managing global state in web applications. Redux can be used with any framework or even vanilla JavaScript, but it is closely associated with React. The script explains Redux's core concept of a single, globally accessible store that is updated via actions, which is similar to the useReducer hook in React. The Redux cycle is described as starting with an action creator in a component, dispatching the action to the store, and then having the appropriate reducer update the state. This leads to a re-render of the UI. The script also touches on Redux's history, its current standing in the development community, and when it is appropriate to use Redux. It concludes by emphasizing Redux's goal of separating state update logic from the rest of the application, making it easier to manage complex state in large applications.

Takeaways

• 📚 Redux is a third-party library used to manage global state in web applications, and it's not limited to React but can be used with any framework or even Vanilla JavaScript.
• 🔄 Redux operates on the principle of a single, globally accessible store that holds the application's state, which is updated through actions, similar to the useReducer hook in React.
• 🤝 Redux is often used in conjunction with React through the react-redux library, which facilitates the connection between the two.
• 📈 The Redux store can contain one or multiple reducers, each responsible for a specific feature or data domain within the application, ensuring a clear separation of concerns.
• ⚙️ Action creators in Redux are functions that automate the creation of action objects, centralizing actions and reducing the likelihood of errors.
• 🔧 Redux is historically significant and was once a staple in React applications for state management, but the landscape has evolved with the introduction of alternative tools.
• 🚫 Redux is not necessary for every application; it's recommended for use when managing a significant amount of global UI state that requires frequent updates.
• 📈 Redux Toolkit is a modern approach to writing Redux applications, offering a simpler and more streamlined way to work with Redux compared to classic Redux.
• 📱 The Context API is sometimes considered a replacement for Redux, but the two serve different purposes and the choice between them depends on the specific needs of the application.
• 🛠️ Redux is particularly useful for managing non-remote state within an application, while tools like React Query or SWR are better suited for managing remote state.
• 🏛️ The Redux cycle involves dispatching actions from components to the store, where reducers calculate the new state, leading to a re-render of the UI, encapsulating the state update logic separately from the application.
• 🏦 Redux can be analogized to a bank system where action creators provide instructions (actions), the dispatcher (store) instructs the vault (state) to update, and the process is managed without direct access to the vault.

Q & A

What is Redux and how does it relate to managing global state in a web application?

Redux is a third-party library used to manage global state in a web application. It allows for the storage of all global state within a single, globally accessible store, which can then be updated using actions. Redux is not framework-specific and can be used with any framework or even Vanilla JavaScript, but it is commonly associated with React.

How is Redux connected with React and what role does react-redux library play in this?

Redux has been tightly linked to React, and they can be easily connected using the react-redux library. This library facilitates the integration of Redux with React applications, allowing developers to manage the global state in a structured and predictable manner.

What is the significance of actions in Redux and how are they used to update the state?

In Redux, actions are used to represent information about how the state should be updated. They are dispatched to the store, which then triggers the appropriate reducer to calculate the next state based on the action type and payload. This process is central to updating the global state in a Redux application.

How is the useReducer hook similar to Redux in terms of state management?

The useReducer hook in React follows a similar pattern to Redux for state management. It involves creating actions and dispatching them to a reducer function, which calculates the next state. The main difference is that useReducer is used for managing local state within a component, whereas Redux handles global state across the entire application.

Why is it recommended to use Redux only when managing a significant amount of global UI state?

Redux is recommended for managing a lot of global UI state that needs frequent updates because it provides a centralized store for all global state, making it easier to manage and update. However, for applications with less global state or more remote state, there are often better alternatives available, such as React Query, SWR, or Redux Toolkit Query.

What are the two versions of Redux and how do they differ?

There are two versions of Redux: classic Redux and the more modern Redux with Redux Toolkit. Classic Redux is the original implementation, while Redux Toolkit is a newer approach that simplifies common Redux patterns and reduces boilerplate code. Both versions are compatible with each other.

Why is it important to learn Redux even if it's not used in every React application today?

Redux is important to learn for several reasons: it has a reputation for being complex, making it a frequently requested topic; working on a team may involve encountering older code bases that use Redux; and some applications genuinely require a global state management solution like Redux.

How does the Redux store function as a centralized container for the application's global state?

The Redux store serves as a single source of truth for all global state in an application. It holds the current state tree and allows access to state updates through actions. The store can also contain multiple reducers, each responsible for a different slice of the state, ensuring that the state management remains organized and modular.

What is the role of action creators in Redux and how do they simplify the process of creating actions?

Action creators in Redux are functions that automatically generate action objects, simplifying the process of creating actions. They centralize action definitions, reducing the likelihood of errors such as typos in action type strings. This approach is optional but is a common practice in building real-world Redux applications.

How does the dispatching of actions in Redux relate to the re-rendering of React components?

When an action is dispatched to the Redux store, it triggers the reducers to calculate the new state. Once the state is updated, any React components that subscribe to data from the store will re-render to reflect the new state. This ensures that the UI remains in sync with the latest state data.

What is the purpose of separating the state update logic from the rest of the application in Redux?

Separating the state update logic in Redux allows for a clear distinction between the business logic that manages state transitions and the presentational components that display the UI. This separation makes the application easier to maintain, debug, and reason about, as the state management becomes more predictable and centralized.

Can you provide an analogy to explain the flow of updating state with Redux?

The process of updating state with Redux can be compared to a bank transaction. The developer acts as the action creator, providing instructions (the action) to the dispatcher, who is like the bank teller. The dispatcher then instructs the store (the bank's vault) to update the state. This analogy emphasizes the indirect nature of state updates in Redux, which must go through a series of defined steps.

Outlines

00:00

📚 Understanding Redux and its Mechanics

This paragraph introduces Redux as a third-party library for managing global state in web applications. It emphasizes Redux's compatibility with various frameworks and its historical association with React. The paragraph explains the Redux pattern of storing global state in a single store and updating it through actions, which is similar to the useReducer hook. It also outlines the importance of understanding the useReducer hook before diving into Redux. The Redux store is compared to a bank vault, where state updates are made through actions, and components re-render in response to these updates. The paragraph concludes with a brief mention of Redux's evolution into two versions: classic Redux and Redux Toolkit, and the importance of learning Redux despite the availability of alternatives.

05:00

🔍 When to Use Redux and Its Mechanics

The second paragraph delves into when it's appropriate to use Redux, suggesting that it should be considered when managing a significant amount of global UI state that requires frequent updates. It differentiates between UI state and remote state, noting that modern alternatives like React Query, SWR, and Redux Toolkit Query are better suited for remote state management. The paragraph explains that Redux might be ideal for non-remote state management but acknowledges that many applications no longer require it. It then reviews the mechanics of Redux, drawing parallels with useReducer, and describes the process of creating actions, dispatching them to the store, and how reducers calculate the next state. The paragraph also touches on the concept of action creators to streamline action creation and maintain consistency across the application.

10:04

🔄 The Redux Cycle and its Simplification

The final paragraph simplifies the Redux process, often referred to as the 'Redux cycle'. It outlines the steps involved in updating global state with Redux: calling an action creator, dispatching the resulting action, the action reaching the store, the appropriate reducer updating the state, and finally, the UI re-rendering. The paragraph uses the analogy of a bank transaction to illustrate the Redux process, with the user as the action creator, the action as the instruction, and the dispatcher as the intermediary between the user and the Redux store, which is likened to a bank vault. The paragraph concludes by assuring readers that the Redux fundamentals will be explained step by step, aiming to make the concept clear by the end of the section.

Keywords

💡Redux

Redux is a third-party library used for managing global state in web applications. It is a standalone library that can be used with any framework or even with Vanilla JavaScript. Redux is often associated with React and is used to maintain a single source of truth for the application's state, which is updated through actions. In the video, Redux is compared with the useReducer hook, and it is mentioned that understanding useReducer is essential for grasping Redux.

💡useReducer hook

The useReducer hook is a React-specific feature that allows managing state within functional components. It operates on a similar principle to Redux, where state is updated by dispatching actions to a reducer function. The useReducer hook is used as a basis for understanding Redux, as both implement a pattern of updating state through actions. The video emphasizes that a good understanding of useReducer is necessary before diving into Redux.

💡Global state

Global state refers to the state that is accessible and can be shared across different components within an application. In the context of the video, Redux is introduced as a tool for managing this global state, which is stored in a single, globally accessible store. The video discusses how Redux allows for the centralization of state management, which is a key concept in the theme of the video.

💡Action

An action in Redux is an object that represents an intention to change the state. It typically contains a 'type' property that indicates the type of action to be performed and may also include a 'payload' with additional data required for the state update. Actions are dispatched to the Redux store, triggering the state update process. In the video, actions are compared to the instructions given to a bank teller when making a transaction.

💡Store

The store in Redux is a central repository that holds the entire state tree of the application. It is the single source of truth for the global state and is where actions are dispatched to update the state. The video explains that the store is where all global state lives and is the place where reducers are also defined, making it a central concept in learning Redux.

💡Reducer

A reducer in Redux is a pure function that takes the current state and an action, and returns the next state based on the action's type and payload. Reducers are responsible for calculating the new state of the application in response to dispatched actions. The video mentions that each reducer should be a pure function and that there may be multiple reducers in a store, each handling a specific feature or data domain.

💡Action Creator

An action creator in Redux is a function that returns an action object. It is used to abstract the creation of action objects, making it easier to manage and maintain the actions in an application. The video points out that using action creators helps to centralize actions and reduces the likelihood of errors due to typos in action type strings.

💡React-Redux

React-Redux is a library that provides bindings between React and Redux, making it easier to connect the two. It allows React components to access the Redux store and dispatch actions to update the state. The video mentions react-redux as the library used to connect Redux with React, highlighting its role in the integration process.

💡Context API

The Context API is a feature in React that enables the sharing of data across components without having to pass props down manually through every level of the component tree. The video discusses the Context API as a potential replacement for Redux, but also notes that the decision to use one over the other is more nuanced and depends on the specific needs of the application.

💡Remote state

Remote state refers to the data that is fetched from a server or an external source and is not part of the local UI state. The video differentiates between UI state and remote state, explaining that while Redux is well-suited for managing non-remote or local state, there are better options like React Query or SWR for managing remote state.

💡Redux Toolkit

Redux Toolkit is a more modern approach to writing Redux applications that simplifies common tasks such as store setup, creating reducers, and writing action creators. The video mentions that there are two versions of Redux—classic Redux and Redux Toolkit—and that both will be covered in the course, starting with classic Redux to build a solid foundation.

Highlights

Redux is a third-party library used to manage global state in web applications.

Redux can be used with any framework or even Vanilla JavaScript, but it's closely linked to React.

The Redux store is a globally accessible place where all the global state is stored and can be updated using actions.

The useReducer hook implements a similar pattern to Redux for updating state by dispatching actions.

Redux and useReducer are so similar that understanding useReducer helps in learning Redux.

When the Redux store is updated, all React components consuming data from the store are re-rendered.

Redux is similar to combining the Context API with the useReducer hook.

Some developers consider the Context API as a replacement for Redux, but the truth is more nuanced.

Redux has two versions: classic Redux and the more modern Redux Toolkit.

Redux was historically used in almost every React app for global state management.

Today, many apps don't need Redux anymore due to the availability of alternatives.

Three reasons Redux is included in the course: its reputation, working with older code bases, and some applications requiring something like Redux.

Use Redux when you have lots of global UI state that needs frequent updates.

UI state refers to state about the UI itself or data that doesn't need to be communicated to an API.

For global remote state, there are better options like React Query, SWR, or Redux Toolkit Query.

Redux might be perfect for managing a lot of non-remote state in your app.

Updating state with useReducer involves creating an action with a type and payload, dispatching the action to a reducer, and the reducer calculating the new state.

In Redux, actions are dispatched to the store, not just the reducer.

The Redux store is a centralized container where all global state lives and where reducers are located.

Reducers in the store should be pure functions calculating the next state based on the action and current state.

Create one reducer per application feature or data domain to keep things separated.

Components consuming the updated state in the store will be re-rendered by React.

Action creators are used in Redux to automate the process of writing actions.

Redux aims to separate state update logic from the rest of the application.

Redux is like a bank system where you give instructions to a dispatcher who updates the store (bank vault).

Transcripts

‫As always, let's start by getting

‫a good understanding of what Redux actually is

‫and how the mechanics of Redux work

‫especially when compared with the useReducer hook.

‫So in a nutshell, Redux is a third-party library

‫that we can use to manage global state in a web application.

‫And I say web application,

‫because Redux is actually a complete standalone library

‫that we could use with any framework

‫or even Vanilla JavaScript.

‫However, Redux has always been tightly linked to React

‫and they are actually quite easy to connect

‫using the react-redux library as we will do

‫throughout this section.

‫Now, the big idea behind Redux is that

‫all the global state in your application can be stored

‫inside this one globally accessible store

‫which we can then update using actions.

‫And if this sounds familiar,

‫it's because the useReducer hook

‫implements a very similar pattern.

‫So updating state by dispatching actions.

‫Remember and in fact, the mechanism behind Redux

‫and useReducer is so similar

‫that I will assume that you know how to use useReducer

‫and build the teaching of Redux onto the knowledge

‫that you already have.

‫So again, you should have a pretty good understanding

‫of the useReducer hook in order to move on in this section.

‫And if you don't

‫then please go back to that useReducer section first.

‫But anyway, the idea of updating state

‫in React and in Redux is always the same.

‫So in the case of Redux, as soon as we update the store

‫all the React components that consume some data

‫from the store will be re-rendered.

‫So conceptually, if we think about this

‫Redux is actually quite similar

‫to combining the Context API with the useReducer hook

‫as we have done in the World Wise app.

‫And in fact, many developers even say

‫that the Context API is a replacement for Redux.

‫However, the truth is a bit more nuanced than that

‫as we will discuss by the end of the section

‫once you have some experience with both of these tools.

‫Now Redux has a long history

‫and so today, there are basically two versions of Redux.

‫So two different ways of writing Redux applications,

‫but which are totally compatible with each other.

‫So we have the classic Redux and we have the more modern way

‫of writing Redux with Redux Toolkit.

‫And as you would expect, we will learn both of them

‫in this section starting with classic Redux

‫so that you get the right foundations.

‫Okay, now before we move on to learn how Redux works

‫let's quickly check out when we should actually use Redux.

‫And let's start with some history.

‫So historically, a few years back

‫Redux was used in almost every React app out there

‫for all global state management needs.

‫So you really needed to know Redux.

‫It was as if Redux was even part of React.

‫Today, however the landscape has changed tremendously,

‫because there are now many alternatives

‫as we have already talked about

‫in the advanced state management lecture

‫in a previous section.

‫So today, many apps don't actually need Redux anymore

‫and also don't use Redux anymore.

‫And this means

‫that you might not even need to learn Redux right now.

‫So why is it included in this course then?

‫Well, for three big reasons.

‫First, since Redux has a reputation

‫for being very hard to learn

‫this was probably the most requested topic

‫for this course by my current students.

‫And I think that this course does teach it pretty well

‫in an easy to understand way.

‫Second, when you're working on a team

‫you will likely work with an older code base

‫and then you will definitely encounter Redux.

‫Therefore, you need to learn how it works

‫even if you don't master it.

‫And third, some applications do actually require

‫something like Redux.

‫And so, let's take a look at when that is

‫by bringing back this overview from a previous lecture.

‫So my recommendation

‫and the recommendation of many experts

‫is to use a global state management library like Redux,

‫only when you have lots of global UI state

‫that you need to update frequently.

‫And remember that UI state basically means state

‫that is not fetched from a server

‫that would be remote state.

‫So UI state is simply data about the UI itself

‫or data that doesn't need to be communicated

‫to an API or so.

‫And this distinction is really important,

‫because remember for global remote state

‫we have many better options nowadays like React Query,

‫SWR, or even a tool that is kind of included

‫in modern Redux Toolkit, which is Redux Toolkit Query.

‫So again, do you need to manage a lot

‫of non-remote state in your app,

‫then Redux might be perfect for that.

‫But the truth is that most global state is actually remote

‫which is the reason why so many apps

‫don't use Redux anymore.

‫But we are actually here to learn Redux

‫at least if you still think that it's worthwhile.

‫And I personally think that it is.

‫And so, let's now quickly look at the mechanics

‫of how Redux works.

‫So as I said in the very beginning,

‫this won't be too hard for you,

‫because you already know how useReducer works.

‫And so, let's just quickly review that.

‫So with useReducer when we want to update state

‫from an event handler in a component

‫we start by creating an action.

‫This action is simply an object that usually contains

‫a type and a payload,

‫which is information about how the state should be updated.

‫We then dispatch that action

‫to a so-called reducer function.

‫The reducer takes the action type and the payload,

‫and together with the current state

‫calculates the next state, so the new state value.

‫And to finish as the state updates,

‫of course, the component

‫that originated the state transition will re-render.

‫So this mechanism should be familiar to you at this point,

‫because now we're gonna add two more things onto this

‫in order to learn how Redux works.

‫So the first difference

‫between useReducer and Redux

‫is that in Redux we actually dispatch actions

‫not simply to the reducer,

‫but to the store that we talked about

‫at the beginning.

‫So this store is a centralized container

‫where all global state lives.

‫It's like the single source of truth

‫of all global state across the entire application.

‫The store is also where one or multiple reducers live.

‫And just as a reminder

‫each reducer must be a pure function

‫that has the single task of calculating the next state

‫based on the action that was dispatched to the store

‫and the current state that's already in the store as well.

‫Now, you might be wondering why there are multiple reducers

‫in this store.

‫Well, it's because we should create one reducer

‫per application feature or per data domain

‫in order to keep things separated.

‫For example, in a shopping app, you could have one reducer

‫for the shopping cart, one for some user data,

‫and one for the application color theme, for example.

‫Finally, any component that consumes the state

‫that has been updated in the store

‫will as always get re-rendered by React

‫at least if we're assuming

‫that reusing Redux together with a React app.

‫Okay, so that's the Redux store,

‫but now let's focus on the action again.

‫So in the real world when we use Redux

‫we usually use functions called action creators

‫in order to automate the process of writing actions.

‫So basically, instead of always writing

‫these action objects by hand,

‫we create functions that do this automatically.

‫This has the advantage to keep all actions

‫in one central place

‫which reduces bucks,

‫because developers don't have to remember

‫the exact action type strings.

‫Just note that this is optional and not a feature of Redux.

‫It's just how we build real world Redux apps.

‫Then the rest of the process is of course

‫just what I explained before.

‫Okay, so let's recap how this Redux cycle works

‫as I like to call it.

‫So in order to update global state with Redux,

‫we start by calling an action creator in a component

‫and then dispatch the action that resulted

‫from the action creator.

‫This action will then reach the store

‫where the right reducer will pick it up and update the state

‫according to the instructions.

‫This then triggers a re-render of the UI

‫where the cycle finishes.

‫And the big goal of all this is to make the state

‫update logic separate from the rest of the application.

‫And now just for fun, we can take it back

‫to the bank analogy,

‫when we first talked about useReducer,

‫so remember how we said that when you need to take

‫or to place money into a bank account,

‫you don't do that yourself directly,

‫but instead you go to the person at the desk in the bank

‫in order to give them your instructions.

‫So you don't update the bank vault yourself.

‫And Redux is just like that as well.

‫So taking the example of depositing $50

‫you would definitely be the action creator

‫as you are the one giving the instructions.

‫The instructions themselves are the action

‫and the person that you're talking to

‫is very clearly the dispatcher,

‫because he is the one who will instruct the bank vault

‫to be updated.

‫So the bank's vault is like the Redux store

‫that you can touch directly,

‫but only through the dispatcher.

‫And there you have it, this is how Redux works.

‫Do you still think that it's super-hard and super-confusing?

‫Well, maybe you do and that's 100% not a problem.

‫So I will guide you step by step

‫through the Redux fundamentals throughout this section.

‫And by the end of it all

‫I promise that it will be crystal clear.