React + Redux + TypeScript

Introduction

Miguel Silva

React + Redux + TypeScript

React + Redux + TypeScript

So you want to develop a nice React + Redux app but also take advantage of all the benefits TypeScript provides. We were in a similar situation recently here at OVO. Having used TypeScript in an existing Angular project, we were keen on using TypeScript together with React + Redux in a new project we were building. In this article we share a few suggestions following our own experience working with these technologies.

Create React App

If you are thinking of using Create React App to generate a nice boilerplate for your React app, consider using react-scripts-ts. It allows you to develop your app straight away without having to eject and setup typescript yourself. It also has TSLint already setup and it is regularly updated, so you shouldn't have to wait too long to get new features from the main Create React App project. If you want more control and prefer to setup TypeScript yourself, then you will have to eject from Create React App.

Components

Props

The way to interact with React components is using props, so we should make sure the props that a React component gets, are the props it expects. Before TypeScript or Flow, we did this using React's PropTypes, where we defined the type of props a particular component would expect. With TypeScript we don't need to use PropTypes anymore, we can just create an Interface which will define the type of props that a particular component should get.

Stateless Functional Components

The majority of the components on a React project are typically stateless functional components, which main purpose is to render some UI based on the props it gets. We can use React.SFC and specify the interface for the props and make sure that it returns a JSX element. To have access to React's type definitions you must install @types/react. This is not needed for Redux or Reselect, since both packages include their own type definitions.

React Components

On components where we want access to React's lifecycle events or need to have internal state, we use React.Component. To make sure that the internal state of the component is what we expect, we can also provide the interface for the state as the second argument.

Redux

Redux is a very popular state management library based on the Flux architecture. By introducing TypeScript into a Redux app, it can really help to make it easier to reason with all of Redux's moving parts.

Actions

Every Redux action is identified by it's type. In a typical ES6 codebase we would probably create a const for each action type. In TypeScript we can use a string Enum instead, which allows us to group the constants together in a nicer way.

Reducers

A Redux reducer is just a simple function that gets the current state and an action and returns the new state. Because a reducer can get different actions, we should create a new union type that specifies all the actions that the reducer can get. We should also make sure that the state is what we expect by creating an interface.

Selectors

Redux selectors are useful to compute derived data that we get from the data store. By using a library like Reselect we can also take advantage of selector composition and memoization. We can specify the interface for the input and output state on the Selector arguments.

TL;DR

These are just a few examples of how one can use TypeScript to improve a React + Redux project. By taking advantage of TypeScript features we get a more readable and manageable codebase and a great overall developer experience.