So let's connect our store here to react,
we already got a store, now to connect it,
I need a special package because redux alone is standalone, it is not connected to react.
I'll install it with npm install --save and the name is react-redux
very simple name, I guess.
It does what the name suggests, it allows us to hook up our redux store to our react application.
Now with that installed, I can import something from that package,
so import something from react-redux.
Now here that something actually is a provider component,
we wrap our app component with provider like this,
so here I'll simply wrap it. Provider is a helper component which allows us to kind of inject our store
into the react components. For hooking up the provider component with our store here,
I need to set up a property, a special property expected by the component of course. It's named store
and here, I passed a store created with createStore, which in our case is stored in that store constant,
really a lot of stores here.
So I'm passing that store constant as a value to this prop.
Now with that, the store is connected to our react application, at least a bit.
There still is something missing,
how do we actually get the data from the store, like the counter value in our counter container where
I read now manage this all internally. Well for that, we need to connect this individual container with the
store or to be precise, in the end what we want to do is we want to set up our subscription here,
we do this a bit differently than we did in the nodeJS file though, we won't do it manually by
calling subscribe,
we will use a feature provided by that react-redux package instead,
let me show you which feature I mean. In the counter container
and by the way, this pattern doesn't change,
it's still our container components that managed the state, now
they don't manage it on their own anymore but they are now the places which receive it from redux.
We still use container components which then may distribute it down to their components which they embed
but we never change our pattern of having a few selected components getting the state and passing it
on,
this pattern is still the same even though we'll eventually get rid of state later.
For now let's import something from react-redux though and that something I want to import is called
connect,
it's a function, a higher order component actually, a higher order component we use on the export,
so on the counter export. However not too rapid like this but instead connect itself is a function which
returns a function which takes then a component as input,
so connect is not really a higher order component,
it's a function which returns a higher order component.
The whole idea behind this complex set up simply is that connect now also can be called as a function
and since it returns a function, we then execute the result of connect of this function execution.
We execute this to and pass counter and to this first function execution, we can pass some configuration for
this given container.
Precisely,
we passed two pieces of information to connect. Which part of the whole application state is interesting
to us because here we only have counter
but in bigger apps, you may have loads and loads of different states and pieces of states you manage
and you don't need all of that and all your containers. So you can define which slice of the state do
I want to get in this container and which actions do I want to dispatch because again, in bigger applications
you may have thousands of actions dispatched from all over the application but a given individual container
may only dispatch a couple of these.
So the actions we want to dispatch and the state we want to get,
let's start with the state you want to get. For that, I'll create a new constant
and please notice that I do this after the class here, after my component
class, before the export.
So this is a constant and I'll name it
mapStateToProps,
this is a name you'll often see in articles and tutorials,
the name is totally up to you but it's very clear about what you will store in here.
You store instructions about how the state managed by redux should be mapped to props you can use in
this container because that's important,
the state managed redux is not received as state here because state is the thing you change internally
from within a component.
Those times are over,
redux is now the place where we manage and change the state, so we don't want to get anything which
we can change internally and props are changed internally,
that is why we map the redux state to props.
This is where the name comes from,
mapStateToProps, it actually stores a function which expects the state stored in redux as the
input and returns a javascript object which is a map of prop names and slices of the state stored
in redux.
Now this function will eventually be executed by the react-redux package because we will pass it to
it,
it's our way of configuring which kind of information we need.
So now in this map which we return to here, we should define prop names which are of course totally
up to you, like ctr for counter
and then you access state and this state here again, will be given to you by react-redux which of course
will reach out to your redux state which of course in turn is the state you set up here,
so there will be a counter property available. So we can access this counter property on our state
and with that, we're saying hey please give me the value of the counter in our global state managed by
redux and give it to me in the form of a property name ctr which I then can use in here.
Now with that, we passed this to connect mapStateToProps, like this,
so pass this constant which holds this function and now connect which also then receives the counter component
on the function returned by that first function. Connect
then gives us this container with access to this ctr, our property. This now allows us to output the ctr
property.
So we still have our state in there and for now I'll leave it here
but I can go down to my jsx code in the counter container, and there where I pass the value to the
counter output,
I will no longer pass state counter but instead this.props.ctr, referring to this property.
Let's now save the file and run npm start to start the build process again and then once it started, we
should see that in our application here, we don't get an error.
Hitting these buttons won't do anything because we still just call set state on each button click, due
to this.counterChangedHandler but we're outputting the state from redux up here because the counter
value we output is passed on here to counter output and that's referring to our ctr props, which is
coming from redux and that's 0 initially and right now we have no way of changing it.
Well let's change that in the next lecture and let's start with actions.