{"id":1406,"date":"2023-11-17T07:55:00","date_gmt":"2023-11-17T07:55:00","guid":{"rendered":"https:\/\/codereviewvideos.com\/?p=1406"},"modified":"2023-11-11T11:20:16","modified_gmt":"2023-11-11T11:20:16","slug":"react-usereducer-typescript-example","status":"publish","type":"post","link":"https:\/\/codereviewvideos.com\/react-usereducer-typescript-example\/","title":{"rendered":"React useReducer TypeScript Example"},"content":{"rendered":"\n

Of all the hooks available in React, useReducer<\/code> is easily my favourite. It’s nice to be able to solve simple problems with useState<\/code>, but in component’s with even a smaller amount of complexity than can be solved with a boolean state value, I tend to favour useReducer<\/code>. <\/p>\n\n\n\n

Let’s dig in, see some examples, and find out why.<\/p>\n\n\n\n

The examples I’m going to use are somewhat trivial only for the purposes of easy demonstration. The concepts learned are useful on larger, more complex components. <\/p>\n\n\n\n\n\n

From useState to useReducer<\/h2>\n\n\n\n

The first example is a simple JavaScript \/ JSX counter component. For me, this would actually be preferable to keep as using the useState<\/code> approach, but showing a way we are all familiar with, and how that transfers to useReducer<\/code> has some value, I feel. <\/p>\n\n\n\n

OK, here we go:<\/p>\n\n\n

\/\/ src\/Counter.jsx<\/span>\n\nimport<\/span> React, { useState } from<\/span> 'react'<\/span>;\n\nfunction<\/span> Counter<\/span>(<\/span>) <\/span>{\n  const<\/span> [count, setCount] = useState(0<\/span>);\n\n  const<\/span> increment = ()<\/span> =><\/span> {\n    setCount(count + 1<\/span>);\n  };\n\n  const<\/span> decrement = ()<\/span> =><\/span> {\n    setCount(count - 1<\/span>);\n  };\n\n  return<\/span> (\n    <div<\/span>><\/span>\n      <p<\/span>><\/span>Count: {count}<\/p<\/span>><\/span>\n      <button<\/span> onClick<\/span>={increment}<\/span>><\/span>Increment<\/button<\/span>><\/span>\n      <button<\/span> onClick<\/span>={decrement}<\/span>><\/span>Decrement<\/button<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n\nexport<\/span> default<\/span> Counter;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
 You could ‘upgrade’ this to a TypeScript component very easily:<\/p>\n\n\n
\/\/ src\/Counter.tsx<\/span>\n<\/span><\/mark>\n<\/span><\/span>import<\/span> React, { useState } from<\/span> 'react'<\/span>;\n<\/span><\/span>\n<\/span><\/span>function<\/span> Counter<\/span>(<\/span>) <\/span>{\n<\/span><\/span>  const<\/span> [count, setCount] = useState<number<\/span>>(0<\/span>);\n<\/span><\/mark>\n<\/span><\/span>  const<\/span> increment = ()<\/span> =><\/span> {\n<\/span><\/span>    setCount(count + 1<\/span>);\n<\/span><\/span>  };\n<\/span><\/span>\n<\/span><\/span>  const<\/span> decrement = ()<\/span> =><\/span> {\n<\/span><\/span>    setCount(count - 1<\/span>);\n<\/span><\/span>  };\n<\/span><\/span>\n<\/span><\/span>  return<\/span> (\n<\/span><\/span>    <div>\n<\/span><\/span>      <p>Count: {count}<\/p><\/span>\n<\/span><\/span>      <button onClick={increment}>Increment<\/<\/span>button>\n<\/span><\/span>      <button onClick={decrement}>Decrement<\/button><\/span>\n<\/span><\/span>    <\/<\/span>div>\n<\/span><\/span>  );\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>export<\/span> default<\/span> Counter;\n<\/span><\/span><\/code><\/span>Code language:<\/span> TypeScript<\/span> (<\/span>typescript<\/span>)<\/span><\/small><\/pre>\n\n\n
In this TypeScript version, we explicitly specify the type of the count<\/code> state using useState<number>(0)<\/code>. This tells TypeScript that count<\/code> is expected to be a number.<\/p>\n\n\n\n
It really doesn’t make a huge amount of difference at this stage. But the types will come to help us as we progress.<\/p>\n\n\n\n
In our current Counter component implementation we start with a number, 0<\/code> by default. <\/p>\n\n\n\n
We can then click on a button to add one to the number, or remove one from the number.<\/p>\n\n\n\n
I’ve added a bit of style using Tailwinds and Daisy UI, and without much effort we have something looking like this:<\/p>\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n
    <div>\n      <p<\/span> className<\/span>=\"text-3xl mb-4\"<\/span>><\/span>Count: {count}<\/p<\/span>><\/span><\/span>\n      <button<\/span> onClick<\/span>={increment}<\/span> className<\/span>=\"btn btn-neutral mr-2\"<\/span>><\/span>\n        Increment\n      <\/button<\/span>><\/span><\/span>\n      <button<\/span> onClick<\/span>={decrement}<\/span> className<\/span>=\"btn btn-neutral\"<\/span>><\/span>\n        Decrement\n      <\/button<\/span>><\/span><\/span>\n    <\/div><\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Let’s pretend our Counter website suddenly got to the front page of Reddit, and usage is going to the moon \ud83d\ude80\ud83c\udf1a<\/p>\n\n\n\n
Feature requests are flying in left and right. The biggest request, by far, is for a way to reset the counter.<\/p>\n\n\n\n
Adding A ‘Reset’ Functionality<\/h3>\n\n\n\n
In this example, we’re managing the state of the count using useState<\/code>. Now, let’s add a feature to reset the count back to the initial value. With useState<\/code>, you can do it like this:<\/p>\n\n\n
\/\/ src\/Counter.jsx<\/span>\n\nimport<\/span> React, { useState } from<\/span> 'react'<\/span>;\n\nfunction<\/span> Counter<\/span>(<\/span>) <\/span>{\n  const<\/span> [count, setCount] = useState(0<\/span>);\n\n  const<\/span> increment = ()<\/span> =><\/span> {\n    setCount(count + 1<\/span>);\n  };\n\n  const<\/span> decrement = ()<\/span> =><\/span> {\n    setCount(count - 1<\/span>);\n  };\n\n  const<\/span> reset = ()<\/span> =><\/span> {\n    setCount(0<\/span>);\n  };\n\n  return<\/span> (\n    <div<\/span>><\/span>\n      <p<\/span>><\/span>Count: {count}<\/p<\/span>><\/span>\n      <button<\/span> onClick<\/span>={increment}<\/span>><\/span>Increment<\/button<\/span>><\/span>\n      <button<\/span> onClick<\/span>={decrement}<\/span>><\/span>Decrement<\/button<\/span>><\/span>\n      <button<\/span> onClick<\/span>={reset}<\/span>><\/span>Reset<\/button<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n\nexport<\/span> default<\/span> Counter;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
With three different actions I’d already be starting to consider useReducer<\/code>. These are simple transitions, but in reality our components often are more complex, even with a small handful of possible states. The more complex the state, the more complex the transitions between states, and once you have a bunch of components in play, remembering how everything works down to the nitty gritty can become challenging.<\/p>\n\n\n
\n
\"react<\/figure>\n<\/div>\n\n\n
Let’s see how this same component might look when using useReducer<\/code>:<\/p>\n\n\n
\/\/ src\/Counter.jsx<\/span>\n\nimport<\/span> React, { useReducer } from<\/span> 'react'<\/span>;\n\nconst<\/span> initialState = { count<\/span>: 0<\/span> };\n\nfunction<\/span> reducer<\/span>(state, action<\/span>) <\/span>{\n  switch<\/span> (action.type) {\n    case<\/span> 'INCREMENT'<\/span>:\n      return<\/span> { count<\/span>: state.count + 1<\/span> };\n    case<\/span> 'DECREMENT'<\/span>:\n      return<\/span> { count<\/span>: state.count - 1<\/span> };\n    case<\/span> 'RESET'<\/span>:\n      return<\/span> initialState;\n    default<\/span>:\n      return<\/span> state;\n  }\n}\n\nfunction<\/span> Counter<\/span>(<\/span>) <\/span>{\n  const<\/span> [state, dispatch] = useReducer(reducer, initialState);\n\n  return<\/span> (\n    <div<\/span>><\/span>\n      <p<\/span>><\/span>Count: {state.count}<\/p<\/span>><\/span>\n      <button<\/span> onClick<\/span>={()<\/span> =><\/span> dispatch({ type: 'INCREMENT' })}>Increment<\/button<\/span>><\/span>\n      <button<\/span> onClick<\/span>={()<\/span> =><\/span> dispatch({ type: 'DECREMENT' })}>Decrement<\/button<\/span>><\/span>\n      <button<\/span> onClick<\/span>={()<\/span> =><\/span> dispatch({ type: 'RESET' })}>Reset<\/button<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n}\n\nexport<\/span> default<\/span> Counter;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
I was going to do a line highlight here of everything that changed, but, well… everything has changed \ud83d\ude42<\/p>\n\n\n\n
Well, I say that, but only the internals have changed. The behaviour is actually fundamentally identical to what we had in the useState<\/code> example. <\/p>\n\n\n\n
Let’s break down the component and its key elements:<\/p>\n\n\n\n
Initial State<\/h4>\n\n\n
   const<\/span> initialState = { count<\/span>: 0<\/span> };<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Here, initialState<\/code> defines the initial state of the component, which includes a single property count<\/code> initialised to 0<\/code>.  <\/p>\n\n\n\n
Reducer Function<\/h4>\n\n\n
   function<\/span> reducer<\/span>(state, action<\/span>) <\/span>{\n     switch<\/span> (action.type) {\n       case<\/span> 'INCREMENT'<\/span>:\n         return<\/span> { count<\/span>: state.count + 1<\/span> };\n       case<\/span> 'DECREMENT'<\/span>:\n         return<\/span> { count<\/span>: state.count - 1<\/span> };\n       case<\/span> 'RESET'<\/span>:\n         return<\/span> initialState;\n       default<\/span>:\n         return<\/span> state;\n     }\n   }<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The reducer<\/code> function is responsible for updating the state based on different actions that we define. <\/p>\n\n\n\n
The reducer<\/code> function takes the current state and an action object as parameters and returns a new state.<\/p>\n\n\n\n
In this case, it handles three types of actions: 'INCREMENT'<\/code>, 'DECREMENT'<\/code>, and 'RESET'<\/code>. <\/p>\n\n\n\n
Depending on the action type, it updates the count<\/code> property of the state accordingly.<\/p>\n\n\n\n
useReducer<\/code> Hook<\/h4>\n\n\n
   const<\/span> [state, dispatch] = useReducer(reducer, initialState);<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
The useReducer<\/code> hook is used to manage state in a more structured way. It takes two arguments: the reducer<\/code> function and the initialState<\/code>. <\/p>\n\n\n\n
Much like useState<\/code>, it returns an array with two elements:<\/p>\n\n\n\n