Let's add our provider component and therefore let's first of all import it,
it's named provider from react-redux.
And as I said, we have to wrap the app component with that,
the question is do we include the browser router or not?
The answer is the provider
should wrap everything,
so we'll put it outside of the browser router.
This all gets wrapped by the provider component like this, this is the set up we want to use and there is
something special about using react-redux with the react router
and I'll come back to that and how we fix this.
It basically has to do with making sure that the connect functionality and the routing functionalities
work together fine because both implicitly set up some props on the wrapping component
and we have to make sure that everything works there. For now,
let's create our store though,
let's import create store from redux in the index.js file and let's also add an import to import
our reducer.
So I'll import reducer from
and now we have to go into the store folder and there import it from the reducer file.
We can then create our store and store it in a variable or in a constant to be precise named store maybe,
we create it with the create store method we import from redux and pass the reducer to it, of course.
And with that we can then set the store property on the provider component and pass our created store
which is stored in the constant store, that are a lot of stores and pass that to that store property.
So now we connect our store which is created by redux with our react application.
Of course this won't do much, in the next lecture,
let's work on our reducer and let's make sure that we actually have some logic here to manage our ingredients
through it.