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.

Tags:reactTypeScriptredux