React, Redux and TypeScript: Typed Connect

Posted on March 9, 2017

React and Redux go well together. And thanks to a lot of hard work by the TypeScript team, it's become much easier to use the React/Redux ecosystem in a strongly-typed fashion. From discriminated unions to partial types you can practically type every part of your app. And yet typing connect from react-redux is still elusive. Read on to find out how.

Yes, there are typings out there, but in my experience, the generic typings out there all require you to pass in your typed State left and right. That's simply too much boilerplate to be useful. At least to me. And the typing we'll use is so simple that maintenance is trivial.

Learning TypeScript? Subscribe to my TypeScript articles, tips and tutorials.

Let's get started.

First, we define a few basic types we use all over our apps. There are much better ways to type State and Action, but I just typed them inline for the purposes of this post.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
type State = {
    auth: {
        isLoggedIn: boolean,
    },
};

type Action = {
    type: string,
    [name: string]: any,
};

Then we type Dispatch. Bonus: we add support for thunks. So when you dispatch a thunk, you'll get back the thunk's return value. When you dispatch a plain action, you get back void.

1
2
3
4
5
6
7
export interface Dispatch {
  <R>(asyncAction: (dispatch: Dispatch, getState: () => State) => R): R;
  <R>(asyncAction: (dispatch: Dispatch) => R): R;
  // (neverAction: (dispatch: Dispatch, getState: () => GetState) => never): never;
  (action: Action): void;
  // (action: Thunk): ; // thunks in this app must return a promise
}

Finally, we create our typed connect:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
import * as React from 'react';
import {connect} from 'react-redux';

// We use generic inference.
function typedConnect<OwnProps, StateProps, DispatchProps>(
    // And "capture" the return of mapStateToProps
    mapStateToProps: (state: State, ownProps: OwnProps) => StateProps,
    // As well as the return of mapDispatchToProps.
    // Or in case you use the shorthand literal syntax, capture it as is.
    mapDispatchToProps?: DispatchProps | ((dispatch: Dispatch, ownProps: OwnProps) => DispatchProps),
) {
    // We combine all generics into the inline component we'll declare.
    return function componentImplementation(component: React.StatelessComponent<OwnProps & StateProps & DispatchProps>) {
        // Finally, we double assert the real connect to let us do anything we want.
        // And export a component that only takes OwnProps.
        return connect(mapStateToProps, mapDispatchToProps as any)(component) as any as React.StatelessComponent<OwnProps>;
    }
}

So how do you use it? As a inline stateless component. That's what makes this whole chicken dance work: with the community-typed connect definitions, you lack proper inference and have to repeat yourself often. But by using a stateless component defined inline, you get all the inference you need and only the props that you actually have. Better yet: the connected component will not require that you pass in the props that come from redux.

Below is a real life example. We want an <App /> component that expects one prop to be passed in isDebugging. All other props should come from connect.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
interface Props {
    isDebugging: boolean;
}

const mapStateToProps = (state: State, ownProps: Props) => ({
    isReady: state.boot.isReady,
    isMenuOpen: state.scenes.isMenuOpen,
    isAuthenticated: isAuthenticated(state),
    profile: getProfile(state),
    managedProfile: getCurrentlyManagedProfile(state),
    title: state.scenes.title,
    isDelegatable: state.scenes.isDelegatable,
    isLoading: getIsLoading(state),
    hasHelpToShow: state.scenes.help != null,
    useKilojoules: getUseKilojoules(state),
    isAskingForRating: state.scenes.isAskingForRating as typeof state['scenes']['isAskingForRating'],
});

const mapDispatchToProps = {
    clearManagedProfile,
};

const App = typedConnect(mapStateToProps, mapDispatchToProps)(props => <div className={styles.app}>
    <Notifications />
    <Menu {...props} />
    <Dialogs />
    <div className={styles.viewport} onClick={closeIfMenuOpen(props.isMenuOpen, props.toggleMenu)}>
        <Navigation {...props} showHelp={props.hasHelpToShow ? props.showHelp : null} />

        {props.managedProfile != null && props.isDelegatable &&
        <ManagerBar clearManagedProfile={props.clearManagedProfile} managedProfile={props.managedProfile} />
        }

        {props.isAskingForRating !== false &&
        <RatingRequest {...props} isAskingForRating={props.isAskingForRating} />
        }

        {props.isReady &&
        <div className={styles.main}>
            {props.children}
        </div>
        }
    </div>
</div>);

This component has a ton of props that come in from the global redux state. But the connected component need only be passed isDebugging as a prop. Nothing else. In fact, it won't let you pass in anything.

Nice, simple, and avoids repetition.

Stay tuned for a future post showing more advanced techniques, such as exporting undecorated versions for easy testing.

Comments

krawallerApril 28, 2017, 6:20 a.m.

Thank you ever so much for this post, Silvio! I was battling the exact same puzzle, to the point of also trying to create a typed version of .connect, but I couldn't bring it all the way to the finish line. Piggybacking on your hard work was the solution, thank you for sharing! :)

Reply
silviogutierrezApril 30, 2017, 4:02 p.m.

Thanks for your kind words. I'm glad this was helpful.

Reply
krawallerMay 13, 2017, 4:56 a.m.

Did you see this turning up? https://github.com/Microsoft/TypeScript-React-Starter

Here we get fully typed connected components without having to jump through hoops, using only typings! :)

Reply
silviogutierrezMay 13, 2017, 5:11 a.m.

I did check that out today, actually. But as you can see, the amount of non-inferred typing is pretty excessive. They basically declare everything at least twice.

For now I'll stick to my approach, but hopefully that repo will evolve over time.

Reply
krawallerMay 13, 2017, 5:54 a.m.

I found it super clean to use: https://gist.github.com/krawaller/f0d12beb6a5593b10614e96455080ec3

...but only now realised that when you mix in props from the parents they no longer infer state and dispatch, instead as you say you have to shove everything in, again. I see what you mean.

Indeed, let's hope it matures!

Reply
Marcel VeldhuizenMay 5, 2017, 12:53 p.m.

I came up with a similar solution, but I'm not quite happy with my solution for more complex components that you would typically implement by extending React.Component<T, S>.

The best I've come up with is something like this:


const { propsGeneric, connect } =
    connectedComponentHelper<Props>()(mapStateToProps, mapDispatchToProps);
type ComponentProps = typeof propsGeneric;

class MyComponent extends React.Component<ComponentProps, {}> {
    // Component implementation
}

The implementation of the helper method can be found in my blog post.

Do you have any ideas to maybe simplify this further?

Reply
silviogutierrezMay 13, 2017, 4:03 p.m.

Your approach is close to the method I use for class based implementations. Mine has a touch less typing, but ultimately you do need that "fake" propsGeneric variable so you can run typeof on it.

Reply
stevematdaviesNov. 21, 2017, 12:23 p.m.

How does this even work??? mapDispatchToProps state is typed as your state, however, in redux, the state will also include the name of the reducer function, which is not on your State Object.

Reply
silviogutierrezNov. 30, 2017, 6:20 p.m.

Hi there,

Not sure what you're referring to. The name of the reducer function is never included in any object passed to the map functions. Do you mind elaborating?

Best,

Silvio

Reply
∆ [c0d3r28] ∆Dec. 1, 2017, 6:55 a.m.

With combined reducers, the exported reducer function name becomes part of the state tree, and thus has to be reflected in any state typing.

Reply
silviogutierrezDec. 1, 2017, 3:48 p.m.

I see what you mean. In the above case, "auth" is one of the reducers that then gets combined into the single main reducer. So you can see it's reflected in the typing for State.

In reality, I generate this State typing like so:

export interface State { auth: typeof auth.initialState; boot: typeof boot.initialState; }

You can see that each sub-reducer exports its initial state and we can combine it into the State typing.

Reply
stevematdaviesDec. 1, 2017, 3:57 p.m.

I like that approach, but in reality it will add complexity to the code base surely, as dont' you have to also define all those initial states, and in some cases the initial state values are null or empty objects, which can also need typing themselves?

For example, in a theming module I am doing, the customization initial state is simply an empty Object, but once its populated, it becomes a nested object of other objects, each would also need there own type to compile. Herein lies the issue.

´ ìniitalState= { custom: {}} // customizationReducer

// after populating

// customization Reducer state (for example) { ... other things custom: { palette: {...}, themes: {[// themeTypes]}, ids: [], text: {[{//text-types},{},{}] }}} } ` So You can see the complexity, it wont just be able to mapToState and say:

theme: typeof customization.initialState unless the initialState itself is fully typed

Reply
silviogutierrezDec. 1, 2017, 4 p.m.

In my case, 99% of my inner initialStates are object literals so typeof just works nicely. Example from boot.ts:

export const initialState = { isReady: false, version: '', platform: null as 'web'|'android'|'ios'|null, };

Reply
CiaraApril 25, 2019, 6:54 a.m.

I am going to use this script. Best Stick Vacuums

Reply
JessicaJune 26, 2019, 9:02 a.m.

This is an interesting post and i loved it. garbage disposals 2019

Reply
Lilian BeuzevilleMarch 1, 2019, 5:25 a.m.

Fashion is so much essential in our life and we need to have focus on it. Sometimes there is essay tiger reviews that are known and made after the vast surveys of experienced people.

Reply
star19March 7, 2019, 10:09 a.m.

You did really good work. I really appreciate your new and different post. Please guys keep it up and share with us some unique post in the future… engineering college in chandigarh

Reply
Max PetisMarch 18, 2019, 10:57 a.m.

Your methodology is near the technique I use for class based executions. Mine has a touch less composing, at the end of the day you do require that "counterfeit" prime assignment variable so you can run kind of on it.

Reply
MarkDevineMarch 19, 2019, 2:24 p.m.

Utilizing specifically language can confound application advancement toward the start however is exceptionally helpful in do my coursework for me the event that you adhere to some extra standards. The application we are working in this article depends on TypeScript to demonstrate that it is so natural to refactor your Redux store with the assistance of TypeScript.

Reply
hijMarch 28, 2019, 11:17 a.m.

Apple products are revered for its quality, precision and great design. SRSG started its operations as Apple technology partners in the year 1997.
Apple reseller in Kolkata
Apple authorized service center in delhi
newsroom automation
ipad reseller in Delhi
MacBook Air reseller in ahmedabad

Reply
Jacob liamApril 4, 2019, 11:32 a.m.

There are so many online assignment help website to help you. It is important to choose the best one among the many. Before choosing the one go for that website reviews first and then check the website like their services, prices, discounts, website interface, and everything. Go through their samples that how they write so, you can understand the level of their experts. Programming Help

Reply
VeroniaApril 25, 2019, 6:53 a.m.

This script is very helpful for me. Best embroidery machine 2019

Reply
andrew symondMay 4, 2019, 11 a.m.

Writing an assignment is a difficult task for students because they have lots of work to do so they are unable to submit their homework assignment on time. SingaporeAssignmentHelp.com take initiative to support students in their academics so students can get higher marks in college exams and build a successful career. Get homework help at an affordable price.

Reply
NikieMay 10, 2019, 12:04 p.m.

We offer calculated visibility for the design and development of technology platforms through ourintensive research-based approach, consistency in performance, and adept decision-making caliber.
website development company in malaysia
digital marketing services in singapore
search engine optimization services in malaysia
digital marketing services in malaysia

Reply
andrew symondMay 17, 2019, 9:52 a.m.

Everybody knows SingaporeAssignmentHelp.com is one of the finest assignment providing company who always there for students help in their Dissertation writing services at the lowest price.

Reply
fggfggfMay 18, 2019, 2:13 p.m.

Cela peut vous apporter des gains sur une courte période, mais il est extrêmement défavorable à long terme pour le développement des commerciaux. Parce que, si les intérêts du client sont endommagés, cela réduira sans aucun doute leur confiance dans le personnel de vente, ce qui entraînera inévitablement un grand nombre de pertes de clients. Par conséquent, Replique Breitling dans le processus de vente, si le personnel de vente peut résoudre le problème rencontré par le client comme son propre problème, au lieu de faire une "vente à l'unité", la confiance mutuelle sera sans aucun doute renforcée, de sorte que le client La relation sera également plus stable et la coopération durera plus longtemps.

Reply
postalexperienceMay 22, 2019, 3:53 a.m.

The USPS (United States Postal Service) is a postal service agency provide its services in the United States and associated states. USPS is authorized by the United States Constitution.

postalexperience | mcdvoice | epayitonline

Reply
Deam jonesMay 22, 2019, 4:38 p.m.

Norton antivirus is designed to detect and eliminate the possible threats for a system like worms, Trojan and other viruses and can perform multiple application scan. norton.com/setup | norton.com/setup | norton.com/setup It serves you the best security services which helps to secure system and networks. No matter what kind of viruses and spyware have infected your computer, it can clean your computer without taking too much time. mcafee.com/activate | office.com/setup | office.com/setup

Reply
packers and movers in DelhiJune 14, 2019, 9:49 a.m.

Great Article!Thanks for sharing with us. https://www.shiftinindia.com/ https://www.shiftinindia.com/packers-and-movers-delhi-to-mumbai https://www.shiftinindia.com/home-shifting-services-in-delhi https://www.shiftinindia.com/packers-and-movers-delhi-charges

Reply
Norton.com/setupJune 18, 2019, 7:49 a.m.

Norton.com/Setup - Norton is a well-known name offering a variety of security services to their users. It has marked its name in the market of personal as well as business security.

Norton.com/setup

Reply
JamesJuly 3, 2019, 6:29 a.m.

This is definitely a well-written post. https://tentaken.com/can-get-facetime-for-android/

Reply
josef smithJuly 10, 2019, 7:43 a.m.

Your article is astonishing and your article has for every condition of the mammoth substance with a good Hostpapa 99 Hosting with lighting up info. Tolerantly do not stop you earth-shattering substance structure keeps it up.

Reply
GosJuly 12, 2019, 10:35 a.m.

The Health system is created in a proficient way of expanding the network in the multispecialty services. With the ever-growing population, the hospital has announced many ambitious plans that have ultimately lead to the excellence.
best IVF center in hisar
test tube baby hospital in hisar
The goal of the society is to create professionally well skilled students To achieve the said goal, arrangements have been made with the pioneers and front runners both in India and abroad.
best school in dehradun

Reply
Kristy MurphyJuly 16, 2019, 5:36 a.m.

There are a number of websites that provide Online Assignment Help for various subjects, but to choose the one that provides the best service is very difficult. GoAssignmentHelp is the right place to go who are searching for someone for their economics assignments. I would recommend them because I use their services many times for different subjects and I feel glad for finding this portal. They promise to deliver top quality Online Assignment Australia and they really mean it. They have highly qualified and well-experienced assignment writers who provide high-quality research material at amazingly lower pricing packages.

Reply
KimmyAug. 1, 2019, 4:48 a.m.

YES it was so good to find these kinda of pages of ampang cleaning service LocalService

Reply
Sophie MillerJuly 31, 2019, 2:38 p.m.

I would like to read about it anymore. Prompt, what literature to study? www.mybkexperience.com

Reply
packers and Movers AhmedabadAug. 5, 2019, 7:15 a.m.

Packers and Movers Ahmedabad - We Provide ***Best Service Providers, Safe, Reliable, Affordable, Trusted ###Movers and Packers in Ahmedabad List, Household Shifting, Office Relocation: Choose Top Verified Packers and Movers Ahmedabad Compare ???Shifting Service Chrages, Price Quotation, Rate List Charts and Save Money and Time @ Packers and Movers Ahmedabad

Reply
Kristen StewartAug. 7, 2019, 11:19 a.m.

Looking for essay help online that boost your academic growth? Our affordable essay writing service offers 100% original papers crafted by our professional essay writers.

Are you looking for dissertation writing help? Our expert Dissertation writers of UK are ready to help you by providing affordable dissertation writing service.

Our professional affordable thesis writing service will do all the work for you! Our experts can provide you with an excellent paper at a low price 24/7!

We offer the best affordable assignment writing service for students in the UK. Now you can get professional assistance with all your academic writing easily!

Reply
Robert SmithAug. 16, 2019, 1:07 p.m.

Remarkable post. I enjoyed examining your articles. This is to a great degree a magnificent investigated for me. I have bookmarked it and I am suspecting examining new articles. Keep doing astonishing! Vancouver Referencing Generator

Reply
susan mayerAug. 24, 2019, 4:26 a.m.

Positive site, where did u come up with the information on this posting?I have read a few of the articles on your website now, and I really like your style. Thanks a million and please keep up the effective work. instagram viewer

Reply
Max WillorSept. 5, 2019, 5:51 a.m.

Myassignmenthelpau is an ideal platform for every student who requires Marketing Assignment Helpwith their academic assignments. If a student doesn’t know how to get high-quality assignment help then this is one such platform that provides the best Marketing Assignment Help in Australia.

Reply
Kate FoxSept. 5, 2019, 8:46 a.m.

Not all people have enough time to be able to improve their writing skills and develop themselves professionally. Still, this is not a grave situation as you can easily find a way out – seek professional white paper writing help from qualified and competent white paper assignment writers.

Reply
Emma DavisSept. 6, 2019, 11:35 a.m.

Vancouver referencing is a note citation system to cite the academic papers or any important documents. This referencing generator tool is also known as the documentary style note. To include the process of referencing and citations in the academic paper is very important to increase the readability of the paper and it will eventually help students in scoring good grades. This Vancouver citation tool has been designed to create the most accurate formatting and referencing style for your academic paper, that too within a matter of minutes. So all your confusion over Vancouver style citation machine and referencing style will be resolved when you select our online Vancouver reference generator tool from Allessaywriter.com.

Reply
donSept. 6, 2019, 11:54 a.m.

When you provide users with more helpful windows server managers content then it becomes a good idea to have a helpful site which really provides a big collection of thoughts through the website for readers. The wide variety of such appropriate thoughts and subjects makes the website more impressive to users of all kinds. q

Reply
Jun LeeSept. 10, 2019, 9:33 a.m.

Indonesia have large online casino market, one of the best online casino website among in indonesia is yes8indo, here is the link of their website, safety and trustable platform, you should take a try http://www.yess8indo.com

Reply
Nancy PamelaSept. 12, 2019, 3:25 p.m.

Logo Motix, a Custom Logo Design Service in UK, serving a large number of customers around the world, render our administrations primarily in the field of unraveling advanced and primary web solutions for organizations and businesses needing a push to move ahead among other higher-ranked businesses in the world.

Reply
selfieSept. 18, 2019, 11:25 a.m.

Welcome to the world of gaming, where life is fast paced and interesting. There is always an adventure waiting for you online.
csgo ranked accounts
csgo bundles accounts

Reply
Naomi YangSept. 18, 2019, 2:07 p.m.

When ordering essays from Exclusive-Paper.com, you can be sure about deadline meeting. We organize our work using a simple technique that involves high-quality writing, responsibility, and personal care. More info https://exclusive-paper.com/affordable-nursing-paper-writing-service.php

Reply

Post New Comment