TypeScript can provide type-safety for reducers in your application, improves the documentation of your code, and overall improves long-term maintainability. Also, Redux 

officially recommends using static typing

Let's re-implement a todolist app. It is a basic example that many are familiar with, so it will be easier to focus on TypeScript part of a deal.

 using Create React App with the TypeScript template:

npx create-react-app my-app-name --template typescript
# or using Yarn
yarn create react-app my-app-name --template typescript

First of all, we need to add dependencies to our app. We're going to need redux , react-redux,  and types for the last one. We won't need an additional types package for Redux since it has its own type annotations.

npm i --save redux react-redux
npm i -D @types/react @types/react-redux
# or using Yarn
yarn add redux react-redux
yarn add -D @types/react @types/react-redux

Define types for the store state and todo items:

type TodoId = string;

type Todo = {
  id: TodoId;
  title: string;
  completed: boolean;
}

type TodosState = {
  todos: Todo[]
}

Then, create a default value for the store:

const initialState: TodosState = {
  todos: []
}

When the state is created, we can create 

 that will change the state. To be short, we will have only 2 actions that will add a new todo or mark them complete or incomplete.

// We use `enum` as sort of a dictionary
// for all of our todos.
enum TodoAction {
  Add = 'ADD_TODO',
  Toggle = 'TOGGLE_TODO'
}

// Later we can use it to define action's type:
type AddTodoAction = {
  type: TodoAction.Add;
  payload: Todo;
}

// To toggle a todo we need to know its id to find it:
type ToggleTodoAction = {
  type: TodoAction.Toggle;
  payload: TodoId;
}

// This type will be used later,
// when we will define a store.
type TodoActions = AddTodoAction | ToggleTodoAction;

When typings are completed, we create the actions themselves:

// TypeScript infers that this function 
// returns AddTodoAction.
function addTodo(todo: Todo): TodoActions {
  return {
    type: TodoAction.Add,
    payload: todo
  }
}

// So as it infers that this function 
// returns ToggleTodoAction.
function toggleTodo(id: TodoId): TodoActions {
  return {
    type: TodoAction.Toggle,
    payload: id
  }
}

// It is a convention to name reducer-function
// with the same name that a state they change has.
function todos(
  state: TodosState = initialState, 
  action: TodoActions
): TodosState {
  switch (action.type) {
    case TodoAction.Add:
      return {
		todos: [...state.todos, action.payload]
      }
      
    case TodoAction.Toggle: {
      // When toggling, we need to find 
      // which todo is being toggled.
      // You might want to add extra checks 
      // for the case when 
      // a todo isn't found in the state to avoid errors.
      const todoIndex = state.todos.findIndex(
        item => item.id === action.payload);
      const todo = state.todos[todoIndex];
      
      return {
	      todos: [
          // The rest of the state is the same,
		  // only change the found one.
          ...state.todos.slice(0, todoIndex),
          {...todo, completed: !todo.completed},
          ...state.todos.slice(todoIndex + 1)
        ]
	  }
  	}
      
    // By default, return the state as is.
    default:
      return state
  }
}

If we had more than one reducer we would want to combine them using the 

import {combineReducers} from 'redux';

const rootReducer = combineReducers({
  todos
})

// The `RootState` type will be needed
// for using the state later.
type RootState = ReturnType<typeof rootReducer>

It would allow us to create a single store instead of many for each feature.

When everything is done, we can create a store:

import {createStore} from 'redux';

// TypeScript infers the type of the store automatically.
const store = createStore(rootReducer);

 component that lets you connect your components with the store.

import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import {createStore} from 'redux';

// ...
const store = createStore(rootReducer);

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

Finally, when everything is ready, we can use our actions in components. 

 has a set of hooks that can access the store and dispatch actions. The 

import React, {useState} from 'react';
import {useDispatch} from 'react-redux';
import {addTodo} from './store/todos';

const AddTodo = () => {
  const [title, setTitle] = useState('');
  const dispatch = useDispatch();
  
  const handleSubmit = (e) => {
    e.preventDefault();
    setTitle('');

    // After calling this function,
    // the state will have a new todo 
    // with the `title` we sent.
    dispatch(addTodo({
      id: 'some-unique-id-string',
      completed: false,
      title,
    }));
  }
  
  return (
    <form onSubmit={handleSubmit}>
      <input 
        type="text" 
        name="todoName" 
        value={title} 
        onChange={(e) => setTitle(e.target.value)} 
      />
	    <button>Add Todo</button>
    </form>
  )
}

import React from 'react'
import {
  useSelector,
  TypedUseSelectorHook 
} from 'react-redux'

// We use RootState we defined earlier
// to make `useSelector` understand 
// the store structure via type assertion 
// with the `TypedUseSelectorHook` generic:
const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector;

const TodoList = () => {
  const dispatch = useDispatch();
  const {todos} = useTypedSelector(state => state.todos);
  
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          <input
            type="checkbox"
            checked={todo.completed}
            onChange={() =>
        	  dispatch(toggleTodo(todo.id))}
          />
          {todo.title}
        </li>
      ))}
    </ul>
  )
}

This is the basics of typing the react-redux application. There are additional tricks that allow you to throw errors when an unknown action has been fired or to make type-checking even stricter. But we will cover them in a different post later.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">How to Use Redux with TypeScript</h1><p>TypeScript can provide type-safety for reducers in your application, improves the documentation of your code, and overall improves long-term maintainability. Also, Redux <a href="https://redux.js.org/style-guide/style-guide#use-static-typing" rel="noopener noreferrer nofollow">officially recommends using static typing</a> in their docs.</p><h2><a name="basics" id="basics">Basics</a></h2><p>Let's re-implement a todolist app. It is a basic example that many are familiar with, so it will be easier to focus on TypeScript part of a deal.</p><p><a href="https://www.newline.co/@bespoyasov/how-to-create-react-typescript-application-with-create-react-app--f04409fe" rel="noopener noreferrer nofollow">Create a new React app</a> using Create React App with the TypeScript template:</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-49crc" id="cm-49crc">npx create-react-app my-app-name --template typescript
# or using Yarn
yarn create react-app my-app-name --template typescript</textarea><p>First of all, we need to add dependencies to our app. We're going to need redux , react-redux,  and types for the last one. We won't need an additional types package for Redux since it has its own type annotations.</p><textarea data-iscodemirror="true" data-mode="text/x-sh" data-uniqueid="cm-tTQAm" id="cm-tTQAm">npm i --save redux react-redux
npm i -D @types/react @types/react-redux
# or using Yarn
yarn add redux react-redux
yarn add -D @types/react @types/react-redux</textarea><p>When it's done, we can create a state.</p><h2><a name="typing-a-state" id="typing-a-state">Typing a State</a></h2><p>Define types for the store state and todo items:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-sNpGp" id="cm-sNpGp">type TodoId = string;

type Todo = {
  id: TodoId;
  title: string;
  completed: boolean;
}

type TodosState = {
  todos: Todo[]
}</textarea><p>Then, create a default value for the store:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-gB3zj" id="cm-gB3zj">const initialState: TodosState = {
  todos: []
}</textarea><h2><a name="adding-actions" id="adding-actions">Adding Actions</a></h2><p>When the state is created, we can create <a href="https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers#designing-actions" rel="noopener noreferrer nofollow">actions</a> that will change the state. To be short, we will have only 2 actions that will add a new todo or mark them complete or incomplete.</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-yMYmj" id="cm-yMYmj">// We use `enum` as sort of a dictionary
// for all of our todos.
enum TodoAction {
  Add = 'ADD_TODO',
  Toggle = 'TOGGLE_TODO'
}

// Later we can use it to define action's type:
type AddTodoAction = {
  type: TodoAction.Add;
  payload: Todo;
}

// To toggle a todo we need to know its id to find it:
type ToggleTodoAction = {
  type: TodoAction.Toggle;
  payload: TodoId;
}

// This type will be used later,
// when we will define a store.
type TodoActions = AddTodoAction | ToggleTodoAction;</textarea><p>When typings are completed, we create the actions themselves:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-fu07C" id="cm-fu07C">// TypeScript infers that this function 
// returns AddTodoAction.
function addTodo(todo: Todo): TodoActions {
  return {
    type: TodoAction.Add,
    payload: todo
  }
}

// So as it infers that this function 
// returns ToggleTodoAction.
function toggleTodo(id: TodoId): TodoActions {
  return {
    type: TodoAction.Toggle,
    payload: id
  }
}</textarea><h2><a name="adding-a-reducer" id="adding-a-reducer">Adding a Reducer</a></h2><p>Now we can add a reducer for todos:</p><textarea data-iscodemirror="true" data-mode="javascript" data-uniqueid="cm-7she9" id="cm-7she9">// It is a convention to name reducer-function
// with the same name that a state they change has.
function todos(
  state: TodosState = initialState, 
  action: TodoActions
): TodosState {
  switch (action.type) {
    case TodoAction.Add:
      return {
		todos: [...state.todos, action.payload]
      }
      
    case TodoAction.Toggle: {
      // When toggling, we need to find 
      // which todo is being toggled.
      // You might want to add extra checks 
      // for the case when 
      // a todo isn't found in the state to avoid errors.
      const todoIndex = state.todos.findIndex(
        item =&gt; item.id === action.payload);
      const todo = state.todos[todoIndex];
      
      return {
	      todos: [
          // The rest of the state is the same,
		  // only change the found one.
          ...state.todos.slice(0, todoIndex),
          {...todo, completed: !todo.completed},
          ...state.todos.slice(todoIndex + 1)
        ]
	  }
  	}
      
    // By default, return the state as is.
    default:
      return state
  }
}</textarea><h2><a name="combining-reducers" id="combining-reducers">Combining Reducers</a></h2><p>If we had more than one reducer we would want to combine them using the <code>combineReducers</code> function:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-uSte3" id="cm-uSte3">import {combineReducers} from 'redux';

const rootReducer = combineReducers({
  todos
})

// The `RootState` type will be needed
// for using the state later.
type RootState = ReturnType&lt;typeof rootReducer&gt;</textarea><p>It would allow us to create a single store instead of many for each feature.</p><h2><a name="creating-a-store" id="creating-a-store">Creating a Store</a></h2><p>When everything is done, we can create a store:</p><textarea data-iscodemirror="true" data-mode="text/typescript" data-uniqueid="cm-rceLO" id="cm-rceLO">import {createStore} from 'redux';

// TypeScript infers the type of the store automatically.
const store = createStore(rootReducer);</textarea><h2><a name="using-a-store-provider" id="using-a-store-provider">Using a Store Provider</a></h2><p>The <code>react-redux</code> package has a <code>Provider</code> component that lets you connect your components with the store.</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-YjJAF" id="cm-YjJAF">import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import {createStore} from 'redux';

// ...
const store = createStore(rootReducer);

ReactDOM.render(
  &lt;Provider store={store}&gt;
    &lt;App /&gt;
  &lt;/Provider&gt;,
  document.getElementById('root')
)</textarea><h2><a name="dispatching-actions" id="dispatching-actions">Dispatching Actions</a></h2><p>Finally, when everything is ready, we can use our actions in components. <code>react-redux</code> has a set of hooks that can access the store and dispatch actions. The <code>useDispatch</code> hook lets us fire actions:</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-BStzd" id="cm-BStzd">import React, {useState} from 'react';
import {useDispatch} from 'react-redux';
import {addTodo} from './store/todos';

const AddTodo = () =&gt; {
  const [title, setTitle] = useState('');
  const dispatch = useDispatch();
  
  const handleSubmit = (e) =&gt; {
    e.preventDefault();
    setTitle('');

    // After calling this function,
    // the state will have a new todo 
    // with the `title` we sent.
    dispatch(addTodo({
      id: 'some-unique-id-string',
      completed: false,
      title,
    }));
  }
  
  return (
    &lt;form onSubmit={handleSubmit}&gt;
      &lt;input 
        type="text" 
        name="todoName" 
        value={title} 
        onChange={(e) =&gt; setTitle(e.target.value)} 
      /&gt;
	    &lt;button&gt;Add Todo&lt;/button&gt;
    &lt;/form&gt;
  )
}</textarea><h2><a name="using-state-values" id="using-state-values">Using State Values</a></h2><p>For accessing the state value, <code>react-redux</code> has a <code><a href="https://react-redux.js.org/api/hooks#useselector" rel="noopener noreferrer nofollow">useSelector</a></code> hook. It is best to use <code>useSelector</code> than <code><a href="https://react-redux.js.org/api/hooks#usestore" rel="noopener noreferrer nofollow">useStore</a></code> to avoid unnecessary re-renders.</p><textarea data-iscodemirror="true" data-mode="text/typescript-jsx" data-uniqueid="cm-ArxdM" id="cm-ArxdM">import React from 'react'
import {
  useSelector,
  TypedUseSelectorHook 
} from 'react-redux'

// We use RootState we defined earlier
// to make `useSelector` understand 
// the store structure via type assertion 
// with the `TypedUseSelectorHook` generic:
const useTypedSelector: TypedUseSelectorHook&lt;RootState&gt; = useSelector;

const TodoList = () =&gt; {
  const dispatch = useDispatch();
  const {todos} = useTypedSelector(state =&gt; state.todos);
  
  return (
    &lt;ul&gt;
      {todos.map(todo =&gt; (
        &lt;li key={todo.id}&gt;
          &lt;input
            type="checkbox"
            checked={todo.completed}
            onChange={() =&gt;
        	  dispatch(toggleTodo(todo.id))}
          /&gt;
          {todo.title}
        &lt;/li&gt;
      ))}
    &lt;/ul&gt;
  )
}</textarea><h2><a name="conclusion" id="conclusion">Conclusion</a></h2><p>This is the basics of typing the react-redux application. There are additional tricks that allow you to throw errors when an unknown action has been fired or to make type-checking even stricter. But we will cover them in a different post later.</p><h2><a name="sources" id="sources">Sources</a></h2><ul><li><p><a href="https://www.newline.co/@bespoyasov/how-to-create-react-typescript-application-with-create-react-app--f04409fe" rel="noopener noreferrer nofollow">How to create react typescript application with Create React App</a></p></li><li><p><a href="https://www.newline.co/@bespoyasov/how-to-handle-keyboard-input-events-in-react-typescript-application--9b21764e" rel="noopener noreferrer nofollow">How to Handle Keyboard Input Events in React TypeScript Application</a></p></li><li><p><a href="https://redux.js.org/api/api-reference" rel="noopener noreferrer nofollow">Redux</a></p></li><li><p><a href="https://react-redux.js.org/api/connect" rel="noopener noreferrer nofollow">React-Redux</a></p></li><li><p><a href="https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers#designing-actions" rel="noopener noreferrer nofollow">Actions</a></p></li><li><p><a href="https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers#writing-reducers" rel="noopener noreferrer nofollow">Reducers</a></p></li><li><p><a href="https://redux.js.org/tutorials/fundamentals/part-4-store" rel="noopener noreferrer nofollow">Store</a></p></li><li><p><a href="https://react-redux.js.org/api/hooks" rel="noopener noreferrer nofollow">React-Redux Hooks</a></p></li><li><p><a href="https://react-redux.js.org/using-react-redux/static-typing#typing-the-useselector-hook" rel="noopener noreferrer nofollow">Static Typing in React Redux</a></p></li></ul>

AUTHOR

Alex Bespoyasov

TypeScript can provide type-safety for reducers in your application, improves the documentation of your code, and overall improves long-term maintainability. Also, Redux officially recommends using static typing in their docs. Let's re-implement a todolist app. It is a basic example that many are…

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

How to Use Redux with TypeScript

Tags

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript