Hi and welcome back to our series on react native and redux Toolkit.
Today we're going to be talking about how
to configure the store using the combined reducers that we created in the last video.
So for this, what we're going to have
to do is import configure
store from Redux JS toolkit.
And then below our root reducer,
we're going to create another constant and we're going to call it store.
And we're going to use this configure
store function to provide our root reducer.
And then what we're going to do is we're going to export this tor by default.
And I just want to explain what the configure store function is.
The configure state function takes
an object as an argument where you can specify the initial state of your
application as well as any middleware and enhancers that you want to use
and in this example we're just specifying the combine reducers as the only required
option and we're providing it the root reducers that we created here.
Now, if you want to use your reducer, you can certainly do so.
For this, all you need to do is go
to App JS file here App TSX file for me, actually.
And we're just going to import provider from React Redux.
And then we're going to place all of our
code inside this provider so that we can provide the values of our store.
And we're just going to say store.
And we're going to give it the store that we just exported from our store JS file.
And let's put all of our code inside this provider.
And now we have access to the store.
So if we just go to our home screen, for example, and inside here we use
a header component that we defined from our components.
Now we know that we need to give it
a title and let's just give it a title of not for now let's save this and make sure
that it displays on our simulator and it does.
And if we want to tie our header to the reducer that we created
here we're going to have to use something called useselector.
So let's import that from React redux.
Let's create a selector called user and we're going to use useselector to get
the state of our app and the specific one that we want to get is user.
We could get the user's information using
user first name and last name and all of that.
But let's just get the whole object here and if we console log user here go to our
terminal, we're going to see everything that we defined in our reducer in here
which means that it is ready for us
to be use anytime in any component, whether it is header inside the header
component, whether it is inside other components like badges, tabs, whatever.
You can use selector anywhere and grab
the state from your reducers anytime you want.
So instead of Nata, here what I'm going to do is use our
selector and I'm going to say user first name plus user last name.
That's what I want this to show.
I'm going to save it.
And here we're going to see Nata Vacheishvili appear here.
It would be better if I had space in between and great.
This is how you configure your store
and then make it provide all of the values from your store
to your screens or any components that you want.
Thanks so much for watching.
I'll see you in the next video.