Welcome back.
Now that we have our actions constants and reducers, let's start connecting this redux part of our application
to our react application.
Now the way we can do that is quite simple.
If you remember we downloaded a package called react redux and this package let's import it over here
comes with nice and easy API of just two things.
One is a provider and the other one is connect and using these two things we're going to be able to
connect these two parts of our application.
So I'm going to say import from react redux.
Now in this video we're going to talk about the provider and in the next video talk about connect.
So for now let's just have the provider importing.
Now within here there's a few things we need to do first is to create the store. If we go back to our
diagram we remember that there's something called a store and redox which is the source of all truth.
That is it's a big object javascript, object that describes the state of our app so that react can render
it make changes and display it to the user.
So we've created an action we've created and reduce a reducer and we also need a store.
So let's do that first.
We can use the redux package for this and say import and it has a function called create store.
Nice and easy name.
And we're going to import that from the redux package.
Now the way we create a store is quite easy and we can say const store equals
create store and within here we put the, what we call a rootReducer, that is the reducer of our app
Now in real life,
we have many many reducers.
If we go back to our reducer file, right now we only have one the search robots reducer.
But as I said before applications get more and more complex and you're going to have more and more actions
that need to be taken.
And we can keep listing actions related to search robots right in here but later on in the video we
also need to get robots from the API.
If you remember. now because of that we're going to have many many many reducers and in the store we
want to combine all these reducers to create one root reducer which we're going to do later on.
But for now because we only have one reducer, let's just use the search robots reducer to create
the store
and we need to import this.
So let's go ahead and do that.
And I say import
search robots from our reducer file.
All right.
So I have search robots here to create the store with and that's it.
We have a store. Now this store can now be accessed and passed down into our app.
Remember with redux hypothetically we can remove all state from our react up and keep it inside of
the store and pass down the store as a prop.
So let's see what happens if I do that if I go store equals to the store that we have and I save.
And let's also open up app.js
And in the
componentDidMount.
Let's just console log
this.props.store
All right let's run npm start
When I open up the console
and we have a bit of an narrow here that's just a syntax error in our case then statements so let's
fix that.
Go to reducers.
We don't need the double quotes here for the semicolon here because we have it over here.
Let's save that and we get an error saying that search field is not defined in our reducers file.
And again a small little error here.
The way we want to pass the third parameter to an object.assign is as an object so we want to go like
this.
And we to constant small little error here to save all right.
So everything is working.
We have a warning saying that provider is defined but never used that's fine.
Because while we're not using yet.
But let's go to console log and see what happens.
All right we see that our store over here has logged out and we have a few functions that we can use
including get state. Let's use that and see what happens.
Again going to my index file I'm going to say or in our app.js file I'm going to say get state, going
to save go back and look at that.
We have our state which just has the search field right now.
All right.
So we're passing down our store as a prop and we can use get state. Very cool, let's remove this console
log.
Since we don't need it we understand what's going on now in the index file we need to pass down the
store to the app.
Now we don't really want to pass down the store all the way down our component tree to the smaller components
over and over again and react redox gives us a nice component that we can use to do this very easily.
We can simply wrap our app component in this provider component.
Let me show you.
We're going to have a provider component and this app component is going to be inside of it just like
that.
Now the formatting here is a little bit off but it's fine for now.
I just wanna see that the provider is wrapping the app and now instead of passing down the store to
the app we can just include it into the provider component and the provider component is going to take
care of passing down the store to all the components down the component tree from the app and we use something
called Connect which we talked about to finish this connection.
So there you have it.
We've created the provider component that passes down the store and the store uses the root reducer or whatever
reducers that we have to create the store and create that object tree of our state.
So in the next video let me save this. In the next video we're going to use the other part of react redux
to finally connect everything together.
I'll see that one. Bye bye.