And a welcome back. We know how the RoboFriends app works
now, with react, that's great. But Bruno asked us a specific thing. We need to add redux to our
RoboFriends app so that it can scale well, and handle state management better.
Now with these next videos were going to work together, step by step.
I'm going to show you how redux is implemented and how it works and you're going to be following along
trying to make sure that your code works as well.
All right so take a pause now and get your environment set up.
So you can code along with me. You're all set?
All right.
I'm going to get started.
The first thing I'm going to do is, I have my RoboFriends app, so I'm going to clone this repo and
we'll just do our regular set up with git clone and then I'm going to CD into my RoboFriend. Perfect.
Let's open this up in your text editor.
And again I love joining these together so it looks nice.
And clean.
Perfect.
Now obviously the first thing we need to do when we clone something is npm install to make sure
we have all the packages.
And we also want to make sure that everything is running smoothly without any errors whatsoever.
So the next step is going to be to run npm start.
All right.
Perfect.
Everything is working.
And we should be able to filter.
Perfect.
All right.
So we're familiar with this codebase.
We have our react app, but that's it. Just a simple react app with containers and components.
The very first thing we would want to do is install redux. So I'm going to close this and run npm install redux.
This redux package will give us some tools in order to incorporate redux into our react app.
But here's the cool part.
With the redux package, and why I'm such a big fan.
It's that 90 percent of your code is still going to be Javascript. Redux is going to give you a few helpers
but you're still writing Javascript.
It's still improving your Javascript skills.
When you write redux and it teaches really really good principles, which is why I'm such a big fan of
the library. You might not always need redux in your projects but it is just a good, good tool to learn
because it has such great concepts that you'll use throughout your career.
Now the second thing we need, and this is something similar with react - remember how we installed the
react package, and then we also needed something called the react dom package to connect react to
the dom? Well, in similar fashion.
We need to connect redux to react because redux theoretically could work with any other library by adding
another package.
We can again let react know that hey we're going to be using redux with you.
So that's very easy to do.
We'll just npm install and the package is called react redux.
And the way this react redux is going to work is that it's going to connect only the containers.
So in this case app.js to the, what we call a redux store or that big Javascript object we're talking
about.
That describes the state of our app and they're going to communicate, the container is going to communicate
with the store and vice versa.
Now the other components, what we call dumb or presentational components,
won't know that redux exists.
The only connection is going to be between something called a container or a smart component and the
redux store.
So let me show you what I mean.
If you remember this diagram we just installed the redux package which you can think of it as being
over here.
This red box that allows us to create a store and a couple of other help functions.
We also downloaded react redux which allows us to connect these two pieces and react redux is able
to be used in order to say hey we want these yellow components to be aware that we're using redux and to
get their state from the redux store.
So just think of this diagram as we're working through it all we're doing is essentially connecting
these two libraries together.
All right so now that we have these two packages we can start importing them and using it within our
app but that's for the next couple of videos. I'll see you in the next one.
Bye-bye.