In the last section we discussed an imaginary application that shows a bunch of books we modeled the 2
application using this diagram right here. 3
So where does redux come into this. 4
And for that matter what part does re-act play at all. 5
Redux is the data contained inside this application box whereas re-act is really the views contained 6
inside the application box when redux describes itself as a state container. 7
It really means a collection of all the data that describes the app that not only includes the hard 8
data like the list of books but it also includes more metal level properties like what is the currently 9
selected book react on the other hand represents the views which translates the app's data into something 10
that can be displayed on the screen as something that the user can actually interact with. 11
Now you might you thinking OK well you know this doesn't really look that much different from angular 12
backbone or even flux right. 13
What's what's the difference here the difference here is that we centralize all of the applications 14
data inside of a single object. 15
When you have any other javascript library you always have separate collections of data on you know 16
backbone has collections Flugge says different stores. 17
Angular has whatever and ular does. 18
I'm not really an angular guy redux on the other hand centralizes all of this data into a central single 19
object which referred to as the state. 20
And remember a couple of seconds ago I tried to make a distinction between component level state and 21
redux state when we talked about state with redox. 22
We're talking about application level state. 23
So it's the application as a whole. 24
It's this global it's this big object that contains all the data of our application. 25
So let's look at two more examples of redux. 26
One simple and a one a little more complex. 27
The first one is likely to be the most common example when describing flock's a counter. 28
So here's a mock up of a counter application. 29
The app is incredibly simple. 30
Right at the bottom is a counter that starts at zero. 31
And when the user presses the plus button the number goes up by one. 32
And then when they click the Midas button. 33
Well you could probably guess it goes down by one. 34
In this example we are a three is displayed you can imagine that the user presses the plus button three 35
times. 36
You know simple enough. 37
Now ask yourself if you had to make a diagram that separated the app into two camps where one box showed 38
all the different types of data and one showed all the different types of views what might it look like 39
here. 40
It is a pretty simple example. 41
But we made it look like 42
here's one possible interpretation. 43
The only piece of data flowing around in the app is the current count excuse me the current count. 44
On the other side the view side there is just to the plus and minus button. 45
Perhaps you know the number changer over here and the view that shows the current count which is maybe 46
you know a current count component whatever. 47
Sorry to be in charge of showing the two views. 48
The two components. 49
Whereas Reebok's was keeping track of the current state of the counter. 50
It's what's keeping track of the actual number the actual number of times that the button has been pressed 51
. 52
Remember read x contains the state of the application or the data that tells our components how or what 53
they should render. 54
OK let's do one more example of this data modeling in the next section and then start tackling a real 55
world example.