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

Channel: Codevolution

Views: 1,419

Rating: 5 out of 5

Keywords: Codevolution, React, TypeScript, React TypeScript, React TypeScript Tutorial, React TypeScript Tutorial for Beginners, React with TypeScript, React with TypeScript Tutorial, useReducer Hook, useReducer Hook with React and TypeScript, React TypeScript Tutorial on useReducer Hook

Id: lSh9RyYcnPA

Length: 6min 35sec (395 seconds)

Published: Mon Sep 13 2021