One issue we faced building SPAs with Typescript was additional boilerplate when combined with other paradigms, specifically state management and Redux. The Redux docs[1] give a good starting point for Typescript integration, but their approach remains convoluted. We wanted a way of simplifying this integration to minimise the effort of achieving full type coverage within our codebase.

Our issue

• Using Redux to manage state, but typescript can lead to additional boilerplate so type safety less likely to be used
• Typescript shines when used everywhere in the codebase
• Various state refactors and migrations (e.g. redux-thunk → redux-sagas) only benefit from typescript coverage when the underlying state is fully typed

Solution by example

We'll create a simple app for displaying a customer's transactions to show how we can create type safety alongside Redux.

State

We define a new type for our transaction, and the store's state.

// types.ts

type Transaction = {
 id: string;
 description: string;
 amount: number;
 categoryId: Category['id'];
};

type State = {
transactions: Transaction[];
};

Actions

We use the typesafe-actions library to generate typed actions. Defining a new params type for when we dispatch the action.

// actions.ts

import { createStandardAction } from 'typesafe-actions';
import { Transaction } from "../types";

type SetTransactionDescriptionParams = { transactionId: Transaction['id'], description: Transaction['description'] };
export const setTransactionDescription = createStandardAction('SET_TRANSACTION_DESCRIPTION')<SetTransactionDescriptionParams>();

export const deleteTransaction = createStandardAction('DELETE_TRANSACTION')<Transaction['id']>();

The following shows the type safety we get when (incorrectly) dispatching actions:

Reducers

Where typesafe-action starts to shine.

The dispatched action is typed with the ActionType helper. This builds a union type of the actions:

action: ActionType<typeof transactionListActions>

// evaluates to

{ type: 'SET_TRANSACTION_DESCRIPTION', payload: SetTransactionDescriptionParams } || { type: 'DELETE_TRANSACTION', payload: Transaction['id'] }

We use a switch statement on the action's type, and the getType helper to extract the action's type. This allows the payload's type to be correctly inferred & used within the scope.

// reducer.ts

import * as transactionListActions from './actions';
import { ActionType, getType } from 'typesafe-actions';
import { Category, Transaction } from "../types";

export const transactionListReducer = (state: TransactionListState, action: ActionType<typeof transactionListActions>): TransactionListState => {
 switch (action.type) {
   case getType(transactionListActions.setTransactionCategory): //getType evaluates to 'SET_TRANSACTION_DESCRIPTION'
// Payload is now typed correctly
     const { transactionId, categoryId } = action.payload;
...
   case getType(transactionListActions.deleteTransaction):
// Payload is now typed correctly
     const transactionId = action.payload;
...

   default:
     return state;
 }
};

The following shows the payload type suggestions we get when within a case.

Selectors

Simply type the state

// selectors.ts

import { TransactionListState } from "./reducer";
import { Transaction } from "../types";

export const selectTransactions = (state: TransactionListState) => state.transactions;
export const selectCategories = (state: TransactionListState) => state.categories;

export const selectTransaction = (state: TransactionListState, transactionId: Transaction['id'] ) =>
state.transactions.find(transaction => transaction.id === transactionId);

Alternatives & follow ups

• Recently been a lot of talk about Redux Toolkit, could this help simplify further?
• Do we even need Redux anymore? Next up we'll be talking about a Redux alternative using built-in React Hooks & Context API.