Introduction & Series Context
The series is sponsored by Retool, the fast way to build internal tools. Retool provides a set of best-in-class UI components and pre-built data connectors for databases and APIs in a drag-and-drop interface so you can compose apps at the speed of thought. Skip boilerplate code with 90+ pre-built components, import custom React components, and write JavaScript anywhere you need it. Try the free forever plan today at retool.com.
Hey everyone, my name is Vishwas and welcome to a brand new tutorial series on Redux Toolkit featuring React. In this introductory video, we are going to briefly go over what the library is, why would you want to use it, and take a look at the prerequisites to get started.
Now, what I'm trying to do is make this channel a one-stop shop for everything related to React. So far, we have tutorials on React fundamentals and advanced topics, React Hooks, React Router, React Formik, React Storybook, React Render, React Table, React TypeScript, React Query, and React Styled Components.
In fact, I also have a React Redux playlist. However, the series was created in 2019 and the library has evolved since then. There's a new and improved way to write Redux logic, which is, spoiler alert, the Redux Toolkit library. And this new modern way of using Redux is what we are here to learn. Please consider this playlist as a replacement for the one from 2019 and as a go-to resource for Redux in this channel. I will be teaching the course from scratch.
All right, with that in mind, let's begin.
What is Redux?
I know the title says Redux Toolkit, but let us first go over the Redux library. What exactly is it?
The definition from the documentation is that Redux is a predictable state container for JavaScript apps. To understand what this means, let's break it down into three parts:
- It is for JavaScript apps.
- It is a state container.
- And it is predictable.
Let's take a look at each of these parts individually.
The first part is that Redux is for JavaScript applications. And this is really important. Redux is not tied to React. It is commonly used with React, the series is no exception, but it can be used with any UI library or framework such as Angular, Vue, or even with Vanilla JavaScript. If you have this mental model where Redux and React are tightly coupled, now is a good time to forget about that. Instead, you should remember that Redux is a library for JavaScript applications.
Redux as a State Container
Next, let's move on to the second part. Redux is a state container. Now, what do we mean by a state container? Well, it just means that Redux stores the state of your application. But what exactly do we mean by state of an application?
Well, consider a React app. We have all learned about state of a component. For example, if we have a login form, the state of the component is simply an object that holds username, password, and a submitting flag to indicate the submit action happening in the background. If we had a list of users to display, the state of the component would be an object that contains an array of users.
Extending on this knowledge, we can say that the state of an application is simply the state shared by all the individual components of that application. This includes the data and the UI logic. If your app is medium to large in size, the state of the application could be something like: is user logged in, username, profile picture URL, online users list, is modal opened, is data being currently fetched, and so on. Redux will basically store and manage this application state.
All right, that clears two-thirds of the definition. Redux is a state container for JavaScript apps.
The Predictability of Redux
The final part is that Redux is predictable. The question that comes to our mind is, predictable in what way?
Well, let's go back to the discussion we had a minute ago. Redux is a state container, and in any JavaScript application, the state of an application can change. For example, in a to-do list application, a to-do item can go from being in a state of pending to a state of completed. In Redux, a pattern is enforced to ensure all such state transitions are explicit and can be tracked. In other words, with Redux, the changes to your application's state become predictable. So again, what is Redux? Redux is a predictable state container for Javascript apps.
Now, why should you use Redux? Well, the definition from the previous slide pretty much answers the question. If you want to manage the global state of your application in a predictable way, Redux can help you. The patterns and tools provided by Redux make it easier to understand when, where, why, and how the state of your application is being updated, and how your application logic will behave when those changes occur. Redux guides you towards writing code that is predictable and testable, which helps give you confidence that your application will work as expected.
All right. Now that we know what the Redux package is, the next bit to understand is what the Redux Toolkit package is. After all, the video title says Redux Toolkit tutorial. Well, Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. It is also intended to be the standard way to write Redux logic in your application going forward.
But why is it needed? Although Redux is great, it does have a few shortcomings.
First, configuring Redux in an app seems complicated. Second, in addition to Redux, a lot of other packages have to be installed to get Redux to do something useful. Third, Redux requires too much boilerplate code, that is repeating the same pattern of code every time you have to add a functionality.
As a solution to these problems, to a certain extent of course, Redux Toolkit was created and serves as an abstraction over Redux. It hides the difficult parts, ensuring you have a good developer experience. I hope now the what and why of the Redux Toolkit library is also clear.
The Role of React Redux
Our discussion so far has been UI library or framework agnostic. Redux or Redux Toolkit don't depend on a UI library. However, as the last bit of the video title indicates, we will see how to use Redux Toolkit featuring React as a UI library, as it is pretty common to do so. For that, we need a different package called React Redux.
So we have React, which is a UI library, and we have Redux, which is a state management library. They both work independently of each other. To directly use Redux in a React application is a bit confusing and also difficult. To simplify that, we have the React Redux package. React Redux is the official Redux UI binding library for React. What we mean by that is React Redux offers a couple of functions that will help you connect your React application with Redux. So if you're using React with Redux, or Redux toolkit in our case, you also need to learn React Redux to bind the two libraries.
Let me quickly summarize the points we have learned so far:
- React is a library used to build user interfaces.
- Redux is a library for managing state in a predictable way in JavaScript applications.
- Redux Toolkit is a library for efficient Redux development.
- React Redux is a library that provides bindings to use React and Redux Toolkit together in an application.
Hopefully, these points are clear to you.
Advice: Prerequisites & When to Use Redux
Now, before we proceed with the next video, there are a couple of points I want to discuss. They are sort of my own opinions and also dictate the way I have structured the series, but it is something I speak out of my own experience, so I hope it is of some help to you as well.
All right, the first point. According to me, the most basic mistake you can do is learning Redux and React in parallel. If you're watching this video and you don't know all the fundamental concepts in React, please don't proceed. You're only going to confuse yourself even more. You're going to find it difficult to draw a line between what is done in React and what is done in Redux.
Second point. Should Redux be added to all your React applications? Or to rephrase it, which is also the most common question you find out there, when should I use Redux in my React application?
Now, this is a difficult question to answer. Redux helps you deal with shared state management, but like any tool, it has trade-offs. There are more concepts to learn and more code to write. It also adds some indirection to your code and asks you to follow certain restrictions. It's a trade-off between short-term and long-term productivity.
As a good rule of thumb, Redux is useful when:
- You have large amounts of application state that are needed in many places in the app.
- The app state is updated frequently over time.
- The logic to update that state may be complex.
- The app has a medium or large-sized code base and might be worked on by many people.
Just keep in mind that not all applications need Redux.
Advice: Learning Mindset & Course Structure
Now the third point. Redux is one of those libraries that you need to go through twice or three times just to wrap your head around the basic terminology. You're also going to find out there is a good amount of terminology and concepts that you need to learn before being productive. My advice for you is to not worry if you are not able to pick up on some of the concepts right away. Give it some time, go through the videos multiple times, and things will eventually start to make sense.
Fourth and final point is about the course structure. I've mentioned it earlier, but let me repeat. Redux can work independently without the need of Redux Toolkit or React. For you to understand what Redux Toolkit brings to the table, how it works under the hood, and to understand how React Redux works, it is essential that you first understand the various concepts in Redux itself. It is my personal opinion that as a beginner, you should learn Redux first, Redux Toolkit second, and React Redux third. This will not only help you get a deep understanding of the code you write, but also helps during interviews, as companies do have old codebases where Redux exists without Redux Toolkit.
So in this series, our learning is in three parts. For the first part, we are going to deal with just the Redux library. For the second part, we're going to learn the Redux Toolkit library. Till that is completed, we are not going anywhere near React. Once you've understood the different concepts in Redux and how Redux Toolkit works, we will then see how to bind Redux Toolkit to a React application using React Redux.
Learn both Redux and Redux Toolkit, but choose Redux Toolkit when starting new. Now to understand all this, you have to know React, including React Hooks. You don't have to be an expert by any means, but the fundamentals are absolutely necessary.
All right, with these points in mind, let's start off with Redux in the next video. Thank you for watching. Make sure to subscribe to the channel, and I'll see you in the next one.
