Original subtitles

Were you successful?

Let's do it together.

And for this, let's maybe start in the App component

and render the Auth component,

if we're not authenticated

and render UserProfile if we are authenticated.

So for this, I'll also import UserProfile

from ./components/UserProfile.

And then here,

we need to tap into our

store

and read a value from there.

And we do that with useSelector.

So I'll import useSelector

from React-Redux

and in the App component function

we therefore call useSelector, pass a function to it

a function which will always receive state as a argument

that's passed in by Redux or by React Redux to be precise.

And then here, I wanna return state.auth

.auth because I picked auth as an identifier here.

And then in my authSlice,

I have this isAuthenticated property.

So it's, state.auth.isAuthenticated.

And that gives me the isAuth value.

Of course, this constant can be named however you want.

And we can use this to check if we're not

hence the exclamation mark.

If we're not authenticated

then I wanna show the Auth component.

Else,

if isAuth is truthy

I wanna render UserProfile.

And if everything works, if we save

we should still see that Auth form.

Now we also got some conditional content to render here

in the header and therefore

we can go into the Header JS file

and do the same thing here.

We import useSelector

from React-Redux

and then here

we create our isAuth property

or constant I mean,

call useSelector and use the same selector logic

or diving into state.auth.isAuthenticated.

And now we can use isAuth to conditionally render

or not render those list items.

And since in this case

actually the entire navigation is only relevant.

If we are authenticated, we can also just

render the entire nav item conditionally.

If isAuth is truthy

then

I want to

render

this nav

like this.

If we now save that and reload,

we don't see anything here

because initially we are not authenticated.

Now I wanna the Login action

if the Login button is clicked

I actually won't even bother to read the user input.

I will not validate it.

You can do all of that, but that's not related to Redux.

So I will just care about the form submission

with the Login button,

hence here at the Auth component

we wanna add onSubmit listener on the form here

and then add a new function in the Auth component,

the submit,

or the loginHandler

where we get to the default event

which we still should use to prevent the default

to make sure React doesn't send a HTTP request

or the browser sends a HTTP request to be precise.

You'll learn about that in the forms section.

And then with that wired up

in that loginHandler, after preventing the default

I wanna dispatch

that Login action.

Now for this we wanna use the auth actions

which were exporting

and use this patch.

So in the Auth JS file

we import

useDispatch,

from React-Redux.

And in addition, I also wanna import

from going up one level,

store index.

And from there, I wanna import the auth actions.

And then here in the auth component, we execute

useDispatch to get access to that dispatch function.

And in the loginHandler

we then use the Dispatch function to dispatch

authActions.login

we execute login because you learned that this is a

action creator returning the actual action object

which should be dispatched.

If we do that and save everything.

If we reload and click on Login

we switched to the login state

as we can tell by the changes on the UI,

so that works.

Last but not least,

let's wire up the Logout button here,

and a for this in the header where we got the logout button

I'll add onClick listener on that button

and then add a function here to the Header component

the logoutHandler, where I wanna dispatch my action.

So again, just as before

for this import useDispatch and we import our

authActions from

store index,

we then call

useDispatch in the component function to get access

to that dispatch function.

And then the loginHandler, we then dispatch

we call dispatch

and

to it,

we pass authActions.logout

execute it as a method again

because that then creates that logout action object.

Now we need to wire up the logoutHandler

to onClick

and we should be good to go.

If I now click on Logout, I'm locked out.

If I click on Login, I'm logged back in.

So that is working and that is how we can work

with multiple, totally different pieces

of data in one and the same application.

And that is something you will need

in almost any React application you're going to build.

You will always just have one Redux store

but then typically multiple different state slices

which manage totally different data.

And as you see it, it's super easy to create

and manage multiple slices when using Redux toolkit.