JWT Authentication - Part 3: Redux Typescript for Login

[@dhij]

0:12 Quick Demo
0:53 Redux Explained in 1 minute
2:04 Install dependencies
2:33 Modify index.tsx (refer to 10:32 for wrap up)
3:30 Set up the basic structure for redux store
5:56 Set up the basic structure for the action
7:56 Set up constants
9:10 Set up the basic structure for the reducer
10:32 Pass store into the provider in index.tsx
10:52 Quick fix for the redux store (export)
11:10 Define state interface in the reducer
13:03 Wrap up the reducer part
15:28 Type check the dispatch function in the action
16:56 Define RootState in the store
20:12 Clean up LoginScreen
- 20:36 Move Fetch to the action
- 21:37 useDispatch
23:35 Wrap up the action part
27:23 HomeScreen
- 28:02 Get rid of Props in App.tsx & HomeScreen.tsx
- 28:22 useSelector hook to retrieve the state
- 29:54 Define state object in the store’s combineReducers
33:56 Run our application
34:22 Fix the ‘reducer returned undefined during initialization’ error
- 34:42 Add initial state in the parameter of the reducer
35:25 Redux DevTools
35:45 Taking a look at our partially completed application
36:43 Fixing & getting rid of the props in App.tsx
37:36 Modify logout and create the logout action
39:27 Modify Header (navbar) to dispatch logout
40:18 useSelector hook in the Header (navbar) to display texts accordingly
42:07 Store user information in the local storage
43:25 Store local storage data as the initial state in the store
44:36 Fix the initial states error in the store (reducer undefined on initialization)
45:52 Quick fix for the latency after refreshing the page

[@fezekileplaatyi7224]

Thanks, brother. The tutorial is long but trust me it's worth every minute, thanks again!

[@dhij]

I really appreciate it!

[@plujudramunqk]

Thanks a lot. You are a hero! This tutorial deserves more views.

[@dhij]

Thank you! :)

[@kdu97]

Again thanks a million times! This is the best tutorial ever.
Has some outdated issues, but I managed to fix them!
outdated issues in using history, 2 type issues in const dispatch and error.response.
if anyone needs help, reach me.

[@dhij]

Thanks for pointing those out, I will add the changes soon!

[@kdu97]

@@dhij Cool❤️

[@priyankatile1767]

How you fixed error.response error?

[@tomasburian6550]

This used to work but it's outdated now. I'm still getting a type error as soon as I import the login function from the userAction into the login page.

[@ahmadmustaffa5714]

have you found the solution?

[@kamilherbetko5670]

@@ahmadmustaffa5714 You have to to type dispatch function with ThunkDispatch type:
const dispatch: ThunkDispatch= useDispatch()

[@ahmadmustaffa5714]

@@kamilherbetko5670 thank you

[@kdu97]

​@@kamilherbetko5670 Thank you veru much! You saved me!!!

[@priyankatile1767]

@dhij I got error as 'error' is of type 'unknown'.ts(18046)
(local var) error: unknown at error.response && error.response.data.message
? error.response.data.message
: error.message. How to resolve this?

[@dhij]

hello the error seems to suggest the type for the error is not defined :)

[@chusovles]

createStore was deprecated. how to change to configureStore ?

[@chengjohnny5228]

I like these 3 parts of video. Just a quick question, how do you handle if you have a loading gif?
I check the loading like the followings, but it's not working as expected.
const handleSubmit = async (event: React.FormEvent) => {
event.preventDefault();
dispatch(userLogin(email, password));
if (Object.keys(currentUser.userInfo).length !== 0) {
navigate('/');
} else {
return (
);
}
navigate('/');
};
Where would you do that?

[@dhij]

Hey! Actually, the 'loading' boolean variable in the UserState was created for that purpose. If you look at 13:32, notice how we return { loading: true } for USER_LOGIN_REQUEST case and { loading: false, ... } for USER_LOGIN_SUCCESS.
But first, I noticed there is a mistake in the video. At line 21 of the userActions.tsx, we should be doing dispatch({ type: USER_LOGIN_REQUEST, }) instead of USER_LOGIN_SUCCESS. Only after we do the await fetch('.../api/login') then we do dispatch({ type: USER_LOGIN_SUCCESS, })
In other words, loading variable remains true until the data fetching is done.
So from the home screen,
1. You can deconstruct the userLogin as such:
{ loading, userInfo} = userLogin
2. Use conditional to display your in the home screen. That would look something like this:
{ loading ? : ( Welcome to the Home Page )}
Hope that makes sense!

[@dhij]

Forget about line 21 of the userActions.tsx, I am referring to line 16 of userActions.tsx at 26:00 of the video!

[@chengjohnny5228]

@@dhij Yesss, I totally understand it. And I also noticed you should use USER_LOGIN_REQUEST instead of USER_LOGIN_SUCCESS in the first place, but I think everyone would know it. Last time I built a MERM stack with Redux was 2 years ago because I have become a DevOps since, so a lot of golang, clouds, and automation. I have never used Typescript so it seems I need to start React/Redux all over again :)
Now, I wonder if I should refactor the loading checking in the global context or somewhere, because in such the way you mentioned it, I will need to deconstruct the loading in every page/screen.... What do you think?

[@dhij]

@@chengjohnny5228 Nice! I want to work with Golang & DevOps in the future as well.
For this particular example, we are technically loading only when we login the very first time (when we send the POST request to the login api), so I dont think we would need to deconstruct the loading everywhere.
But yes it makes sense to have that somewhere global, I just haven't looked into it!

[@chengjohnny5228]

@@dhij I'm sure you will get there soon :)
I currently just put the loading and alert components right under the App.tsx, and just checking loading and alert state before rendering everything else. It's a a bit ugly to dispatch many in one action_creator, but it's working. When you have way, I'd like to see it too. Btw, very nice video

[@luisteos]

Thanks a lot!

[@dhij]

Your welcome!

[@DesignerYeb]

Awesome

[@dhij]

Appreciate that LOL