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.

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Tutorials on Reducer

How to Use Redux with TypeScript

Email Newsletter

Popular Topics

Masterclasses

Tutorials

Fullstack React with TypeScript