Check out a free preview of the full Complete Introduction to React (feat. Redux and React Router) course:
The "Flux vs. Redux" Lesson is part of the full, Complete Introduction to React (feat. Redux and React Router) course featured in this preview video. Here's what you'd learn in this lesson:

Redux was modeled after Flux. Although, rather than creating new stores for each data model, Redux utilizes a single tree-like store. Data within this store is modified by a reducer.

Get Unlimited Access Now

Transcript from the "Flux vs. Redux" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Brian: One of the big key differences between Flux and Redux is Flux, you're gonna have many stores, right? There's a bunch of different stores and they get all modified in different places. This actually ends up being,
>> Brian: It's like you hit this critical mass of it's very nice to have many stores, and then you hit, I'm gonna say, ten stores and all the sudden it's a giant disaster to have so many stores, right?

[00:00:26] I was talking to or rather I was listening to one of those conference talk Bill Fisher who's works on React and works at Facebook and Flex and all that. And he mentioned that the Facebook ads page, or one of their ads platform products, has over 100 stores on it.

[00:00:44] And that just makes me cringing on the inside, right? Keeping track of so many different stores seems such a pain to me. So that's kind of where Redux steps in here. Redux kind of took the React approach of just saying, well, you have so many different things, why don't you just try mashing them all together right?

[00:01:05] So the difference with Redux is that there's one store and then you'd store all of your data in a tree. Well this should sound relatively familiar because that's exactly what React is right? It's a tree of components, right? So the idea of Redux is that instead of adding a whole new store you just add a new property, right, and that new property has its own tree of properties underneath it.

[00:01:25] And that's the basic gist behind Redux in that sense.
>> Brian: So okay,
>> Brian: Let's go check the Redux docs, Redux-
>> Speaker 2: .js.org
>> Brian: Yeah, I wonder if there was a diagram that I originally saw, and the dangers of Google image search, right?
>> [LAUGH]
>> Brian: [COUGH] Okay, I'm not gonna find the one I'm looking for.

[00:02:00]
>> Brian: You provided? Nope that's exactly the one I did not want to look at. Okay, so,
>> Brian: Yeah, I'll just follow what I have written here. So Redux has a single store, Flux you have many stores. All data lives in a single store with Redux. Both with Flux and with Redux, intentionally, you cannot modify the data directly.

[00:02:27] You can only read the data and then you can fire off events that then in turn do things to modify it. The difference is with Redux, so you admit an action, right, then the action goes to the dispatcher, right? Well, [SOUND] not really, it's a reducer, blah. Okay, so you admit an action, okay.

[00:02:51] The action gets called to the root reducer, which is very similar to the dispatcher but it actually still is a reducer. And I'm going to define reducer momentarily, so if that's a weird word, it is. Then the root reducer what it's gonna do is it's going to dispatch to small reducers, right?

[00:03:08] And if you want those reducers to dispatch to other reducers, right, it's just reducers all the way down. What a reduce is, remember we were talking about map and filter and all those functional techniques? Well, there's one called reduce as well, right?. There's map reduce, right? Many of us have heard of the term as applied to big data, cuz that's essentially what most big data is.

[00:03:32] Again, being a bullshit industry term, right? [LAUGH] Reducer is just the function passed to a reduce function, right? That's the reducer function. Just like you have a filter and you pass it a filterer. [LAUGH] I don't know, do you call it a mapper? I've never heard it called that but I've heard it called filterer.

[00:03:52] But that's what reducer is, right? So basically what a reducer is is it takes one state, it does some transformation to it, and returns a new state. And this is very key, it's very functional in nature that you get a state, you create a new object, you make the changes to that new object, and return the new object, but you don't modify the old object.

[00:04:16] This is gonna become very, very key once you start trying to debug it, because it allows for some fantastic debugging things which will just melt your mind out of your ears once we decide to do it.