When does it make sense to use a reducer vs a simple state value with React’s Hooks? There’s no hard-and-fast rule, but the React team suggestsuseReducer when “managing state objects that contains multiple sub-values”

That described my use case well. I had a series of steps, each one with multiple sub values, and depending on what the user did, the step(s) would be affected in a variety of ways (to start with - only two, but the number of interactions may grow in the future).

Before jumping into theuseReducer, a few thoughts:

• I could have stored the entire object in a singleuseState and then managed the updates manually. For example, from the docs:¹

setState(prevState=>{// Object.assign would also workreturn{…prevState,…updatedValues};})

• I may have benefitted from using React’s Context API to avoid some of the prop-drilling and passing around that occurred later on. I opted tonot use it in this case, however, because the reducer was used immediately in the child components (i.e. I would not benefit from avoiding prop drilling).

Getting Started - Adding theUseReducer

To actuallyuse this hook, I needed to invoke it within a component. A simplified look at how that was done:

interfaceStep{id:string;hidden?:boolean;status?:StepStatusTypes;}constMyComponent=()=>{/* ... */constinitialArg:Step[]=[...]const[steps,stepsDispatch]=useReducer(stepsReducer,initialArg);/* ... */return(/* ... */<MyChildComponentstepsDispatch={stepsDispatch}/>/* ... */)}

Defining The Reducer

Defining the reducer, the first argument foruseReducer was actually the trickiest part. Not because reducers themselves are actually that complicated, but because of Typescript.

For example, here’s the basic reducer that I came up with:

functionstepsReducer(steps,action){switch(action.type){case'SHOW-ALL':returnsteps.map(step=>({...step,hidden:action.payload}))case'SET-STATUS':steps.splice(action.payload.index,1,{...steps[action.payload.index],status:action.payload.status,})returnstepsdefault:returnsteps}}

If it received aSHOW-ALL action, each step would take the value of the payload and apply it to thehidden attribute. On the other hand, if it received theSET-STATUS action, onlythat step would have its status updated. In all other cases, the steps object was simply returned.

In this project, Typescript is configured to yell if anything has a type ofany - implicitly or otherwise. As a result, I needed to type the Actions. And, given the differentshape of the actions, this proved to be the most challenging part of the entire exercise.

My first approach

interfaceAction{type:stringpayload:boolean|{index:number;status:string}}

I thought this was going to work the compiler started yelling thatindex doesn’t exist on typefalse. Sure, that makes sense - except that I was trying to say it’d be a boolean valueor an objectwith anindex property.

Oh well.

So, I started digging for examples of folks usingredux withtypescript. (While I was using a hook, since they’re still relatively new and the principles are the same, I figured whatever I found, I’d be able to apply.)

I found this thread onhow to type Redux actions and Redux reducers in TypeScript? on Stack Overflow helpful and got me going in the right direction.

The first attempt I made was splitting up the types like the first answer suggests:

interfaceShowAllAction{type:stringpayload:boolean}interfaceAction{type:stringpayload:{index:number;status:string}}typeAction=ShowAllAction|SetStatusAction

Same story. Typescript yelled becauseindex didn’t exist on typefalse. This wasn’t the answer.

Then, I found an answer which usedType Guards.² Type Guards have always made more sense to me than Generics. A Type Guard is a function that allows Typescript to determine which type is being used while a Generic is a type that receives another to define it (actuallyDispatch is a Generic if I’m not mistaken).

Effectively,before I used an action, I needed to determine which type of action I’d be using. Enter Type Guards:

exportinterfaceAction{type:string}exportinterfaceShowAllActionextendsAction{payload:boolean}exportinterfaceSetStatusActionextendsAction{payload:{index:numberstatus:string}}// The Type Guard FunctionsfunctionisShowAllAction(action:Action):actionisShowAllAction{returnaction.type==='SHOW-ALL'}functionisSetStatusAction(action:Action):actionisSetStatusAction{returnaction.type==='SET-STATUS'}functionstepsReducer(steps:IFormStep[],action:Action){if(isShowAllAction(action)){returnsteps.map((step:IFormStep)=>({...step,disabled:action.payload,hidden:action.payload,}))}if(isSetStatusAction(action)){steps.splice(action.payload.index,1,{...steps[action.payload.index],status:action.payload.status,})returnsteps}returnsteps}

With the type guards in place, I was ready to actually start dispatching actions.

Invoking (And Typing) The Dispatch Function

If I had only ever tried to dispatch actions from within the component in which theuseReducer was defined, Typescript probably would have been able to tell what was happening. However, I wanted different parts of my app to be able to dispatch actions and not have to repeat logic. That was why I wanted a shared state in the first place.

That meant I needed to pass the dispatch function around and define it as part of the other component’s interfaces.

So, how do you type a dispatch so that Typescript doesn’t yell? It turns out React exports aDispatch type which takes anAction (note, however, that theAction is the one defined by you).

Use React’sDispatch like so:

importReact,{Dispatch}from"react";import{Action,ShowAllAction}from"../index";constMyChildComponent=({stepsDispatch:Dispatch<Action&ShowAllAction>})=>{/* ... */}

Conclusion

UsinguseReducer with Typescript is not that challenging once the basics are understood. The hardest part about the entire process was getting the typing right, and Type Guards proved to be up to the challenge!

I’m excited to keep exploring other ways to use reducers and dispatch actions.

Maybe my next step will be to explore Action Factories so I don’t have to keep creating these objects!

Footnotes

• ¹ WhileuseState predominately is updated declaratively. It can use the old syntax of usingprevState in a functional update:Hooks API Reference – React.
• ² I’d read the typescript documentation on Type Guards several times in the past without it clicking. As with so many topics, things fell in place once I had a reason to be there.