7. React+Thunk+ActionCreator+Reducer
Hi guys, glad to see you again. Today we're going to continue our story about Redux, Reducer, we will also talk about UseSelector, useDispatch and Thunk, and finally, we will plug it all to our project and make it work. Let’s go.
At first, Let's remember where we stopped last time. We implemented Redux and Thunk.
We created folders for our hooks
But before, we created Reducer with action Creator and fake case for this Creator.
Let’s go ahead. Join to App and I`m using hooks:
Next step:
What did I write here? The USeEffect hook will run Dispatch, which will call our Thunk once.
But we didn't create any Thunk. Let's create it next to our ActionCreator.
It's a complicated design. We use an asynchronous query. In the first brackets we don't take anything, and in the second brackets we get Dispatch. We use the try/catch construct – where we assume two scenarios, when everything is well, or when everything is bad. If it`s OK.
We are creating variable RESULT…. And let`s check what we are receiving in this variable. Console.log(). AXIOS wraps everything in a data object. Everything is OK. But just to be on the safe side, I`m writing in CATCH.
So friends, in App UseEffect runs Dispatch, which calls our Thunk. The Thunk in the result variable gets data from the server using AXIOS. And now we have to pass these data to the Action Creator. Dispatch calls the Action Creator, where I put the result.data.
I`m getting rid of our fake Action Creator. And typing new Action Creator, it calls getPlaceHolderObjectAC. We need to draw our attention to as const. Our Action Creator returns object - this is the action. All actions must have type –it`s key for our door in Reducer (Reducer –is a hotel, and case - is out room in this hotel, and If we want to get in, we must use our key –type in Action Creator), and probably payload, where we place something useful. In our case it is data from AXIOS.
Now we are creating type for Action. And connect it to our General type.
Hence, after that, we gonna create case – and our type prompts us.
Return copy of our data, because Redux works with copies. The easiest way to make a copy is to use destructuring.
We did it. One final touch. Let`s jump to App, and learn how to use Redux. What do we have here?
With the useAppSelector hook we have access to our state. At first it's empty, let's look at the intial state - there's nothing in it.
But we remember that UseEffect, using Dispatch and Thunk, will make a request to the server, and the result will be sent to Action Creator, which will use the Type key to go to the right case (to the right hotel`s door) and rewrite our state from blank to the data that came from the server.
But our App doesn`t work. How come?
Click pause at this video, and think yourself.
I hope, you could figure it out. Our problem was here
We didn`t use data from useAppSelector. I`m correcting it.
Congratulations! We did it, and now we can see our result. Finally we should push our project to GitHub, and check how it works in Heroku.
Ok.
You can see my code in GitHub under this video. Subscribe to my channel and invite all your friends. Now we have a modern stack. Next time we will continue to develop our project, and we will learn how to make new requests to the server. Keep in mind, that the man who couldn’t be a programmer has not been born yet.
git:https://github.com/developeryudintsev...
On this page of the site you can watch the video online 7. React+Thunk+ActionCreator+Reducer with a duration of hours minute second in good quality, which was uploaded by the user It-Patsan-US 28 July 2022, share the link with friends and acquaintances, this video has already been watched 277 times on youtube and it was liked by 11 viewers. Enjoy your viewing!
