Type-checking React and Redux (+Thunk) with Flow — Part 2

Satyajit Sahoo

blog content

Need help with Performance Optimization? 
hire us
Need help with Super app development
hire us
Need help with React Native?
hire us
Need help with migration to React Native?
hire us
Our React Native EU Conference is back
register nowlearn more

In this article, we’ll cover how to type-check Redux. We have very simple counter app which we’re going to type-check. We are also using the thunk middleware for Redux. Things may vary when you have a more complex project or use different middlewares.

Mike Grabowski wrote an article a while back covering some part of it. Make sure to check it out. We’ll expand a bit more in this article and try to cover all the steps you need to do.

Keep in mind that this is the result of learning and experimenting. You might need to tweak it for your workflow and taste.

Install Type Definitions

The first thing we need to do is to install the type definitions for Redux and and React Redux. Thanks to flow-typed, they are just one command away.

Install flow-typed if you haven’t done that yet, then cd to your project directory and type:

This will automatically find and install type definitions for Redux, React Redux and other libraries specified in your package.json.

Make sure you’ve installed flow-bin locally from NPM first.

Type-check Actions

We’ll declare types for all actions in a your project and export a single Action type. Declaring types for all the actions might seem a little bit of work, and you might be tempted to define a generic type like { type: string, payload?: any }, but declaring specific types will help to find mistakes both in your action type strings and shape of payload.

Note that it also depends on what other libraries you use. If you use libraries which generate actions for you, then this list can get out of date quickly. If the library always generates a specific shape of action, you can probably define a generic type for it.

Type-check Reducers

We can define the reducer normally with type annotations and it’ll mostly work:

This will have basic type safety, but still fragile, because flow can infer the type of the action from action.type, but if you make a typo in action.type, then it’ll infer the type as any, basically bypassing type check.

To avoid this scenario, we can use a helper similar to what’s described in Redux docs:

Our helper can look like this:

Note that this doesn’t prevent you from typos in action names. But unlike switch statements, trying to access non-existing properties on the action object gives a warning since actions will no longer be inferred. In addition, flow can no longer refine type of the action according to the action type, so it has a different set of tradeoffs.

You could also define a ActionType enum with all the actions and replace [key: string] in above helper with [key: ActionType] to catch typos.

Though it’s repetitive given that we already have an enum with all possible actions.

Type-check State

To make it easier to define the type for the redux state, we need to do some changes in the root reducer. Basically, move the reducer map to a separate object and export the Reducers type.

Thanks to this great tip from Adam Miskiewicz, we can automatically generate the types for our state from our reducers.

Isn’t it magic? Yes, yes, it is.

What I love about this approach is, your reducers describe your state, both for Redux and for Flow. You don’t have to type out the shape of your state separately for flow, which is great because it will never get out of date.

Type-check Store

To define types for the store, we can import the Store and Dispatch from the installed definitions, and then set them up with our State and Actiontypes.

Since we’re using the redux-thunk middleware, our Dispatch method will be little different than the default method, i.e. — we need to support dispatching thunks along with plain actions.

Now we just need to annotate the store with our shiny new type:

Type-check Action Creators

Action creators are just simple functions, so we just need to annotate them with the types we created before:

Flow will warn when you’re returning invalid actions from the action creator, or trying to dispatch an invalid action.

We don’t necessarily have to use action creators. Since we’ve typed our store above, we could easily dispatch plain actions.

Type-check Containers

The last bit of the puzzle is type-checking the container components. We just need to annotate mapStateToProps with the State type we created earlier.

Combine with the react-redux type definitions we installed earlier, it gives proper type-checking for the props we’re passing to the underlying component.

For example, if we forget to pass a prop, or pass a prop of invalid type in mapStateToProps or mapDispatchToProps other than what’s specified in the Counter component, Flow will warn us.

Wrapping up

That’s it. We now have a decent type-checked React and Redux codebase. You can check the complete project here — satya164/react-boilerplate

There’s so much more to learn and experiment, but I hope this gave you a good starting point. Do you have any tips on how to improve this setup?

Satyajit Sahoo
Satya is in the 2016 Facebook’s TOP 5 external contributors list. You can find him everywhere. Satya is also a React & React Native ninja that will make your apps to stand above the others.
arrow icon
MORE posts from this author

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

learn more

More posts from this category

Ensure your React components perform as intended as your app grows

Discover Reassure - our open-source library that allows you to run performance tests measuring the average rendering time of the in-app components.

business benefits

Performance Optimization

To stay competitive, you need a high-performing app. Improving React Native performance can bring your company many business and tech benefits. To learn more about it, check the page entirely dedicated to React Native Performance Optimization. Discover a real-life example of React Native optimization we performed for Aaqua, a Singaporean platform that enables global users to share their passion through groups.

Bundle React Native apps using Webpack features

Discover Re.Pack – a Webpack-based toolkit that allows you to build a React Native app with the full support of the Webpack ecosystem.

business benefits

Why React Native?

Building an all-in-one platform can bring your company a lot of business and tech benefits like seamless UX experience, global reach, brand growth just to name a few. To learn more about the benefits of using React Native to develop super apps, check out the MoMo case study. Where we helped improve app's performance by migrating architecture to Re.Pack.

stay tuned

Subscribe to our newsletter

You may unsubscribe from these communications at any time. For details see the Privacy Policy.