 hook is a hook that allows you to create a state, update it, and share its data across different components. (Its core logic is similar to 

It takes a reducer-function and an initial state as arguments and returns a tuple of a new state and a dispatch function.

const [
  state, 
  dispatch
] = useReducer(reducer, initialState);

 type, which is a function that takes a state and an action as arguments, updates the state, and returns the updated state:

// react.d.ts
type Reducer<State, Action> = 
  (state: State, action: Action) => State;

A state is usually an object with some data. Let's use a counter as an example.

If we want to keep track of a current counter value, we can create an object with a 

type State = {
  value: number;
}

const initialCounterState: State = {
  value: 0
}

 object will be the default value for the state.

An action is sort of like an event, which triggers the state updates. For example, a counter can have 2 actions: for increasing and decreasing its value.

Usually, an action is an object that has a 

enum ActionKind {
  Increase = 'INCREASE',
  Decrease = 'DECREASE',
}

type Action = {
  type: ActionKind,
  payload: number
}

const increaseAction: Action = {
  type: ActionKind.Increase,
  payload: 1
}

const decreaseAction: Action = {
  type: ActionKind.Decrease,
  payload: 1
}

Now that we have a state and a set of actions we can create a reducer.

function counterReducer(state: State, action: Action): State {
  const {type, payload} = action;
  
  // First, we figure out what action
  // has been fired:
  switch (type) {
     
    // Then, for each action
    // we describe an according state update.
    // For example, for increasing action
    // we add the number from payload
    // to the current value:
    case ActionKind.Increase:
	  return {
        ...state, 
        value: state.value + action.payload
      }
    
    // For decreasing action,
    // we subtract the payload number
    // from the current value:
    case ActionKind.Decrease:
      return {
        ...state, 
        value: state.value - action.payload
      }
      
    // If the action is unknown
    // we return the current state:
    default:
      return state;
  }
}

Now we combine our initial state, reducer, and actions with a component:

import React from 'react'

const Counter: React.FC = () => {
  // When using hook,
  // we get access to 2 values:
  // - a current state,
  // - and a dispatch function.
  const [
    state, 
    dispatch
  // useReducer takes 2 parameters:
  // - the state reducer,
  // - and an initial state.
  ] = useReducer(counterReducer, initialCounterState);
  
  // To update the state,
  // we call the dispatch function
  // and pass as an argument an according action:
  return (
    <div>
      Count: {state.value}
      <button onClick={() => dispatch(decreaseAction)}>
        -
      </button>
      <button onClick={() => dispatch(increaseAction)}>
        +
      </button>
    </div>
  );
}

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Use <code>useReducer</code> with TypeScript</h1><p>The <code><a href="https://reactjs.org/docs/hooks-reference.html#usereducer" rel="noopener noreferrer nofollow">useReducer</a></code> hook is a hook that allows you to create a state, update it, and share its data across different components. (Its core logic is similar to <a href="https://redux.js.org" rel="noopener noreferrer nofollow">Redux</a>.)</p><p>It takes a reducer-function and an initial state as arguments and returns a tuple of a new state and a dispatch function.</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-RXJm8" id="cm-RXJm8">const [
  state, 
  dispatch
] = useReducer(reducer, initialState);</textarea><p>The reducer must extend the <code>Reducer&lt;State, Action&gt;</code> type, which is a function that takes a state and an action as arguments, updates the state, and returns the updated state:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-7WdgB" id="cm-7WdgB">// react.d.ts
type Reducer&lt;State, Action&gt; = 
  (state: State, action: Action) =&gt; State;</textarea><h2><a name="state" id="state">State</a></h2><p>A state is usually an object with some data. Let's use a counter as an example.</p><p>If we want to keep track of a current counter value, we can create an object with a <code>value</code> field:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-GZnvI" id="cm-GZnvI">type State = {
  value: number;
}

const initialCounterState: State = {
  value: 0
}</textarea><p>We will use this <code>State</code> type as a type parameter for the <code>Reducer</code> type later, and the <code>initialState</code> object will be the default value for the state.</p><h2><a name="action" id="action">Action</a></h2><p>An action is sort of like an event, which triggers the state updates. For example, a counter can have 2 actions: for increasing and decreasing its value.</p><p>Usually, an action is an object that has a <code>type</code> and <code>payload</code>. The <code>type</code> is like an ID of this action, and a <code>payload</code> is a data that the action transfers.</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-uwLNH" id="cm-uwLNH">enum ActionKind {
  Increase = 'INCREASE',
  Decrease = 'DECREASE',
}

type Action = {
  type: ActionKind,
  payload: number
}

const increaseAction: Action = {
  type: ActionKind.Increase,
  payload: 1
}

const decreaseAction: Action = {
  type: ActionKind.Decrease,
  payload: 1
}</textarea><h2><a name="reducer" id="reducer">Reducer</a></h2><p>Now that we have a state and a set of actions we can create a reducer.</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-aHBK0" id="cm-aHBK0">function counterReducer(state: State, action: Action): State {
  const {type, payload} = action;
  
  // First, we figure out what action
  // has been fired:
  switch (type) {
     
    // Then, for each action
    // we describe an according state update.
    // For example, for increasing action
    // we add the number from payload
    // to the current value:
    case ActionKind.Increase:
	  return {
        ...state, 
        value: state.value + action.payload
      }
    
    // For decreasing action,
    // we subtract the payload number
    // from the current value:
    case ActionKind.Decrease:
      return {
        ...state, 
        value: state.value - action.payload
      }
      
    // If the action is unknown
    // we return the current state:
    default:
      return state;
  }
}</textarea><p>When a reducer is ready, we can use the <code>useReducer</code> hook.</p><h2><a name="usereducer" id="usereducer"><code>useReducer</code></a></h2><p>Now we combine our initial state, reducer, and actions with a component:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-7I2Yn" id="cm-7I2Yn">import React from 'react'

const Counter: React.FC = () =&gt; {
  // When using hook,
  // we get access to 2 values:
  // - a current state,
  // - and a dispatch function.
  const [
    state, 
    dispatch
  // useReducer takes 2 parameters:
  // - the state reducer,
  // - and an initial state.
  ] = useReducer(counterReducer, initialCounterState);
  
  // To update the state,
  // we call the dispatch function
  // and pass as an argument an according action:
  return (
    &lt;div&gt;
      Count: {state.value}
      &lt;button onClick={() =&gt; dispatch(decreaseAction)}&gt;
        -
      &lt;/button&gt;
      &lt;button onClick={() =&gt; dispatch(increaseAction)}&gt;
        +
      &lt;/button&gt;
    &lt;/div&gt;
  );
}</textarea><h2><a name="sources" id="sources">Sources</a></h2><ul><li><p><code><a href="https://reactjs.org/docs/hooks-reference.html#usereducer" rel="noopener noreferrer nofollow">useReducer</a></code></p></li><li><p><a href="https://redux.js.org" rel="noopener noreferrer nofollow">Redux</a></p></li></ul>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

How to Use useReducer with TypeScript

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript