This course has been updated! We now recommend you take the State Management with Redux & MobX course.
Transcript from the "Introduction to Redux" Lesson
[00:00:03]
>> Steve Kinney: So we're gonna start by talking a little bit about Redux, which raises the obvious, first question of what is Redux? And in a way, think about Redux as an implementation of the Flux pattern. If you recall, there is a necessary a Flux. Flux isn't a framework that you just download and use, but it's an approach to managing state in your application.
[00:00:28] So there's a whole bunch of implementations of the Flux pattern. We talked about the Flux pattern at large, and now we're gonna talk about the Redux and the implementation of that pattern. A lot of this is inspired by Elm and some of the ways that a state is managed in that kind of programming language and paradigm.
[00:00:45] So we're do this in a few phases. I think a lot of times when people learning Redux, they're learning in context of a React application. So they are learning Redux, while they're learning Redux in React and sometimes while they're also learning React, right? And I think that causes a lot of confusion on where the boundaries are, what is the responsibilities of react, what are the responsibilities of reduct?
[00:01:09] And then, there is a third library that we'll talk about in a little bit called React Redux. And so, its kind of hard to keep track of what comes from where and what is the responsibility of each one of those libraries. So we're gonna take a slightly different approach and we're gonna start with Redux outside of React.
[00:01:26] Cuz it turns out that Redux itself is in no way React specific. There is nothing in the Redux library that ties it to React or makes it so you couldn't use it with literally anything, right? And that's part of the reason why the React to Redux library exists, is to like, then provide those bindings, but Redux itself is completely agnostic.
[00:01:51] Cool, so when we had a very simple application yesterday. We had the item store and we had like one model in the application, right? But in a Flux [INAUDIBLE], you likely have a different store for what I call every like noun in your application, right? Every model would be a different store and you [INAUDIBLE] kinda coordinate between them and that can get a little bit out of control.
[00:02:15] If you go looking for more, if it's just like late at night, decide you're gonna Google for like Flux architecture diagrams. You'll see like the one that we saw in the MPM page, you won't find the extra one that I drew yesterday. But you'll also see ones where they just like have more stores and more views and there just arrows going on all over the place.
[00:02:33] It really, it will keep you up night. So Redux take a different approach, where all of your state is in one immutable state tray, right that's it. And so, immutable state tray is a very fancy way to impress people when what you really mean is just a JavaScript object, right?
[00:02:57] But if you say immutable state tree everyone thinks you're a lot smarter and you get a raise at work and it's great. Like Flux, one does not simply modify the state tree and change stuff on it. We distribute actions, those actions change the tree, stuff along those lines.
[00:03:14] So we're going to again look at another very, very scientific and professional looking chart. So here's a new word, reducer. And reducer probably sounds a little bit like the reduce function and that's probably a good gut reaction if you started to think that, because that is effectively what it does.
[00:03:35] But in Redux we have this idea of a reducer. And one of my favorite things about Redux is that almost everything in the library or almost of what you use is just objects and functions. There's not like crazy components and it's just JavaScript objects, JavaScript functions, just arranged in a way that allow you to do some pretty cool stuff with state.
[00:03:56] So the reducer is just a function, and it takes two arguments. It takes some kind of action and we remember that action is really just a JavaScript object that ideally has a type properties and what kind of action occurred and whatever other information that you need. So it takes an action, just a JavaScript object and it takes the current state of your application.
[00:04:18] So two objects go into a reducer, one comes out. So action goes in, current state of the world. Stuff happens inside the reducer. We'll talk about that in a little bit. And then, new state of the world comes out, right? And there's one store that represents your entire application.
[00:04:36] And this is now what's happened, right? We usually still use action creators. We could make those objects by hand every time, but that is error prone and depending on the action, tedious, right? We would write to have a function that does everything for us. So action creators it just a function.
[00:04:59] It creates an object. Object goes in the reducer, which just a function takes object, what comes out? Just an object, right? There's not special classes that you're intantiating. It's really just like very simple Vanilla JavaScript data structures. So we kinda know the theme here. What happens to that new state that we produced?
[00:05:23] Ideally, you create state to do something with it. You either save it to a server or for a lot of us client set engineers were making what with the state of our application.
>> Speaker 2: Views.
>> Steve Kinney: Views, yeah, we'll explain it to the user. So at this point we can send that entire tree or parts of that tree, cuz it's just effectively objects, like props.
[00:05:46] To review, where we can have event listeners, on click, on change, on mouse over, right? And those will ideally trigger action creators and we have once again achieved the react ideal of the unit directional data flow. Stuff goes into reducer, new state comes out. That goes into a view.
[00:06:07] The user can then be the thing that kicks off the cycle, again, by taking some kind of action. That fires off an action creator. The circle continues. We have a user interface. Another really good part about Redux is that it is small. We are going to poke at the entire library together right now.
[00:06:29] So how small is it? It is 5 methods and some of those are even smaller. We'll talk about those in a second.