Image for post
Image for post

Writing a simple React-Redux app with Typescript — Part 3

Zac Tolley
Jul 15, 2018 · 5 min read

In the first 2 parts of this tutorial, we created a React Redux project that uses Typescript and implemented a store make up of actions and reducers with type information to assist in writing correct code. The overall aim is to create a React Redux application that uses type information to reduce errors and mistakes, and hopefully the amount of test code too.

Part 3 will build the presentation layer made up of containers and components and demonstrate how type information can assist in providing better intellisense so you know things like properties and methods available to you, along with their types, without having to go find out yourself.

Let's use Bootstrap for styling because everyone uses Bootstrap right?

Add the Bootstrap package along with Reactstrap, a handy UI Component library, along with it’s associated type information. Then update the top Index.tsx file to include Bootstrap styles.

Let's prove that we have a store and can use it.

Typically when you have a component that is linked to the store you call it a ‘Container’. Some people create a container that just connects a component to the store, some put it all in one file. For now, to keep things simple we will create a container that provides the layout, logic and connects to the store in a single file.

It’s a bit long but it looks like a regular React Redux container. The only differences are that functions specify the types for their parameters and the component itself requires type information for properties and state.

When writing a component in Typescript you need to specify type information for its properties and any state it holds, this is a bit like PropTypes but instead of working at runtime it is used at build time and helps your IDE provide better intellisense. Specify the type information and then use that in the class declaration, first the props interface then the state interface. The second parameter in this example is set to ‘object’, this is because there is no state information and this will end up being an empty object.

I chose to completely remove PropTypes from my component as the majority of bugs are now caught at build time. PropTypes may still be useful during development if your back-end doesn’t conform to the agreed model.

Throughout the process of writing this component, it was much easier to specify properties, i.e. when writing the function to render a contact the editor suggested the properties available and their associated types when typing ‘contact.’. The whole experience was easier than using plain JavaScript.

Now we can see a list of contacts, let’s add a contact detail screen. Being a SPA (Single Page Application) we need to add React Router to allow the user to navigate to different parts of the application.

If you only add react-router the Typescript compiler will tell you there’s no type information and suggest the name of the type library to add.

Just like the ContactList component, we specify the type information for the container properties. The match property comes from React router, and I’ll admit I wasn’t too bothered about type information so it was easiest to bypass type checking for that property and say it could be ‘any’ type. I’ll go back and look at React router later and find out if there is type information for that but I’m not sure there’s any benefit.

This container uses react life-cycle hooks to say when the component has mounted, go and fetch the contact associated with the ID passed in. When the component it unmounted then reset that, so the next time we load this component it doesn’t flash up with the old contact information.

So now we need to allow the contact to see this page via a link. First lets setup React router

In the ContactList component, you can now tell it to link the detail screen. Add an import for the react router Link function and update the line displaying the contact to:

Fire it all up and now you can view a list of contacts (add some more fake data) and select a contact to see it’s details.

A note on React router. I found relatively little information for using React router with Typescript. Normally I would use a common layout and then use that in the router declaration but could not find a good example of this and struggled to get it to work, so chose not to use them for this tutorial. I will come back to this later.

The next part of this will add a form to allow editing and adding new contacts.


Building online services

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store