React and Redux with TypeScript

This week I finally finished a side project I have been working on over the past few months to learn React and Redux in TypeScript; it is a Password Manager type app which if you want to check out you can find over on GitHub.

Whilst building the app I did come across a few head scratching moments at times trying to make React or Redux play nicely with TypeScript’s type system without simply resorting to using the any type. Sometimes I did find the rare example on StackOverflow or blog posts to help, but the majority of times I was on my own.

Given my experience in working with React/Redux in TypeScript, I thought I would share examples of the major parts of these libraries all in one place to help the next person who runs into any of issues I had.

I created a sample app which pulls all this code together over on GitHub and with that I’ll shut up and present the code…

React

Class component

These are React components defined using an ES6 class, typically they are used when you want a component to have state or use life cycle functions such as componentDidMount; I usually use them to define pages.

For more information about Class components in React, see the documentation.

Functional component

These are the simpler React components defined using a function, they just have access to the properties passed in. I use them to create presentational components i.e. those that define a UI element such as a navigation bar.

For more information about Functional components in React, see the documentation.

Redux

Actions

Actions are the messages that are sent around an application to change state.

For more information about the Actions, see this section of the Redux documentation.

Action Types

All Actions must have a type defined as string constants, which in TypeScript you can use String enums as shown in the actionTypeKeys.ts file.

The index.ts file on the other hand defines the shape of the Sign In Actions using Interfaces. These Interfaces can be combined with others defined in different modules to define an ActionTypes type which describes all possible Actions in the application.

Action Creators

Action Creators are functions that return an Action, but they can also dispatch other Actions. In the example below, the other Actions dispatched signal the state of the invocation i.e whether something is in progress, succeeded or failed.

Reducers

Reducers process Actions created in an application and in turn change the state in the Store, according to the type and payload.

For more information about the Reducers, see this section of the Redux documentation.

Store

The Store is the centre point of Redux and combines the Actions and Reducers together; it is where the application state is held.

For more information about the Store, see this section of the Redux documentation.

All together now…

When you put all these pieces together and want to use state or dispatch actions within a React component, it is called a Container component.

For more information about using React and Redux together, see this section of the Redux documentation.