React TypeScript Tutorial – 12 – useReducer Hook
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/01/1704587266_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: React TypeScript Tutorial – 12 – useReducer Hook
Welcome back everyone in the previous few videos we learned how to work with typescript and the use date hook u-state is great for simple state values however if you have complex state logic where the next state depends on the previous state use reducer is preferable
In this video let’s learn how to type a use reducer hub a friendly reminder this video is not about the user reducer hook itself but rather typing the use reducer hook let’s begin for this example i have created a file called counter.tsx within the state folder from before
As you might have guessed this file contains a simple counter component to maintain the count state and updations to the counter value i have included the use reducer hug let me go over the code to help you get a better idea of what is happening first we have the initial state
Which is an object with count set to zero then we have the reducer function it is responsible for updating the state it accepts state and action as parameters and based on the action type updates the count value if action type is increment count is incremented by a payload that is
Specified when dispatching the action if action type is decrement we subtract the payload from the current count value default case we return the state as is a straightforward reducer function as you can see next let’s move on to the counter component itself we’ve called the use reducer hook
Passing in the reducer function and the initial state which returns state and dispatch for use in our component in the jsx we display the count value and we also have two buttons to update the count value the first one is increment 10 which on click dispatches an action
Where type is increment and payload is 10. similarly we have decrement 10 button with type as decrement and payload as 10 once again a basic counter component as you can see let’s now understand how to go about typing the user reducer hook used in this component now where do we start
Well that is simple because typescript tells us where to start we see the red squiggly in our reducer function we need to specify the type of state as well as action let’s start with the state state is an object with one property count whose value is a number
So at the top we can add type counter state one property count of type number and we specify state is of type counter state that fixes the first squiggly line let’s move on to the second one which is action if you take a look at the reducer function body
We can sort of figure out the structure of action it seems to be an object with two properties type which seems to be a string and payload which seems to be a number so let’s do that and see if it works type counteraction has a prop type which is a string
And payload which is a number and the parameter action is now of type counteraction typescript is now happy and guess what this is all we have to do to type the use reducer hug this is again because of type inference in the counter component if you hover over state
You can see typescript has inferred state is of type counter state and if you hover over dispatch the type is react.dispatch of counteraction typescript figured it out from the reducer function that you have passed into the use reducer hook like i mentioned before typescript requires your help only when it is absolutely necessary
Other times it hardly needs your intervention and will figure out the types on its own now let’s make sure type checking works as expected on the first button click if i dispatch an action of boolean type so type set to false we get an error type boolean is not assignable to type string
And if i change payload to the string 10 type string is not assignable to type number we have successfully typed the use reducer hook and on a side note if you ever come across the need to pass in state and dispatch as props to a component simply hover on either state or dispatch
Copy the type which vs code shows in the tooltip and use it as the prop type it’s what i do as well all right our code works perfectly fine but let me tell you we can be more strict when it comes to the action type of the reducer function
Let’s discuss about that in the next video
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Use coupon code CodevolutionYoutube for 100% off lifetime discount to your subscription at https://www.taskade.com/billing
Whatever React, JS, Node.js and TS I have learnt is from your videos Sir!
I really really appreciate your work❤
A bit confusing
GoodJob!
Hello Sir, this is some goood stuff…right here this playlist. it is explaining more than the basic types which is what i was looking for!! thank you a million
why this is not working?
instead of creating another type for the state, you could use state: typeof initialState
why you don't show us the output
very nice explaination! thank you so much!!!
Hi Sir If I will add array of an object then what will be the type of payload and how can I define?
If somebody knows please tell me and thanks in advance
Hello Vishwas, I hope you have XState Tutorial as well. I owe you a lot. I became a dev from most of your vids.
yesss
🙏 Namaste!
Thanks for very comprehensive and useful tutorials always!