Welcome back.
Before we start learning about redux we need to talk about something called state management.
We've heard this word before - state.
Right.
When building a react app.
We had this.state and state described what our app should look like. If we remember this, well,
react is simply a group of components that are rendered in a tree like structure.
So this would be the app.js for example.
And each one of these components would have state for example the red dots over here.
They have state.
So for example this app component will have a state of signed in as, and let's say the state is user
in that case this user component might have a state of user "Mitch" or if signed in as
is "Admin" it might render the admin component and any time you see the blue dot that means there was a
change so if there's a change here it can update something into this component and we render.
And we did this in react and I want you to think of State as memory. An app needs to remember things
in order to work otherwise we would just have simple html web pages like before.
Remember this Keiko Corp Web site.
This really doesn't have any state, does it.
Each time we show the exact same web page to whoever is using it. This page has no idea of who the user
is or any interactions that I'm having - it's mainly just text.
Now the RoboFriends app - that's different.
It has state.
Well mostly because we wrote it and we had the this.state but we can interact with it.
I can type in here.
Leanne and I have a state of the search box having L-E-A in it.
And the robots being filtered with just Leanne. State describes how our app should look. Our app, our Robo-
friends app right now should look like this with just one robot card because the state is of a search
box having the letters L-E-A inside of it.
Now with a simple app like the robo friends ap0,p state it was pretty easy to understand, but state management
is a really hard problem
as our apps get bigger and bigger, and bigger. And you'll actually see in the later part of the course when
we start working on the smart brain app which does the image recognition.
You'll notice how the state gets more and more complicated and your head starts to hurt because you
have to keep track of all these things happening.
So again, with a simple react app we can have nice views and maybe have different states and different
components but eventually as our app gets bigger.
We end up with something like this where we have more and more components more and more state within
that component or we can have one massive state at the very top here which also gets pretty hard and
all these blue dots, as they update,
they also have to update the state and then re-render.
And this example here is just a little diagram but you can see with all these arrows how confusing it's
going to get and keeping track of all this state is really, really hard.
So we need some form of a state management, and redux.
solves this problem for us.
How could we make this diagram simpler and make things easier to understand in our heads as developers?
Redux came up with a novel concept.
What if we just remove all the state,
so this.state from all the components?
What if we just have props.
So all these components just have props being passed down.
And now the state, we keep it in a store. And a store is simply just the state which is this.state
that react had.
But in one massive object just like you see here.
So one single object that describes how our app should look and all we do is just pass down that state
to whichever component needs it as props.
So our diagram from looking like this with just react can go to looking like this with redux where none
of the components need to hold state anymore.
And we can have one massive object that describes our entire app and whichever component needs that
prop can just be passed down to it.
And any updates that happen go through the state, the state gets modified and then we pass down that
information to the component. This diagram might be confusing without actually coding anything.
And we'll come back to it,
so this makes sense.
But even just visually you can see that this diagram looks a lot simpler than the diagram before it.
We have a lot less arrows and everything just flows nicer.
So as we go through the videos you're going to get more and more familiar with this idea of state management.
But I wanted to keep in mind that, that is what redux is solving. Redux is a library that makes state
management easier, not only for reac but for any tools that we use.
It just happens to work really really well with react.
And redux actually got inspiration from database design. From things such as events sourcing or CQRS
which you can read up more on. Databases had the same problem.
All these updates and all these changes happened but we needed a way to make sure that all these changes
are organized in a nice cohesive way.
All right.
Well let's get into the next video and get a little bit deeper with redux.
I'll see you in the next one. Bye bye.