‫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.