README
react-redux-link
Utility to type check component properties when connecting a react component to the redux store
Usage
You need to replace the react-redux connect
call with link
and declare the component properties through ReduxComposedProps
type. ReduxComposedProps
takes up to three generic arguments, all of them optional:
- Properties injected to the component by the parent
- Properties injected to the component from the redux state
- Properties injected to the component using redux dispatch
Example: connect using mapStateToProps
import React from 'react';
import { link, ReduxComposedProps } from 'react-redux-link';
// ...
type MyComponentProps = ReduxComposedProps<
{
// Properties injected from the parent component
fromParent: string;
},
{
// Properties mapped from the redux state
fromState: string;
}
>;
const MyComponent: React.FC<MyComponentProps['all']> = (props) => (/*...*/);
export const ConnectedComponent = link<MyComponentProps /*, TState, TDispatch*/>(Component, {
mapStateToProps: (state, propsFromParent) => ({
fromState: '...'
})
});
Note that link
method takes the redux state and dispatch types as optional generic parameters (TState and TDispatch). These parameters are then used to infer the type of the state
and dispatch
arguments in the mapStateToProps
and mapDispatchToProps
functions respectively. When they are not provided, they will default to DefaultRootState
(type from @types/react-redux) and Dispatch<AnyAction>
(type from redux).
You can avoid having to provide the generic parameters on every link
call by generating a custom typed link
function. For example:
import { getTypedLink } from 'react-redux-link';
import { Dispatch } from './dispatch';
import { State } from './state';
export const typedLink = getTypedLink<State, Dispatch>();
More examples
Connect using mapStateToProps and mapDispatchToProps:
import React from 'react';
import { link, ReduxComposedProps } from 'react-redux-link';
// ...
type MyComponentProps = ReduxComposedProps<
{
// Properties injected from the parent component
fromParent: string;
},
{
// Properties mapped from the redux state
fromState: string;
},
{
// Properties mapped using redux dispatch
fromDispatch: () => void;
}
>;
const MyComponent: React.FC<MyComponentProps['all']> = (props) => (/*...*/);
export const ConnectedComponent = link<MyComponentProps /*, TState, TDispatch*/>(Component, {
mapStateToProps: (state, propsFromParent) => ({
fromState: '...'
}),
mapDispatchToProps: (dispatch, propsFromParent) => ({
fromDispatch: () => {
/* ... */
}
})
});
Connect using mapDispatchToProps:
import React from 'react';
import { link, ReduxComposedProps } from 'react-redux-link';
// ...
type MyComponentProps = ReduxComposedProps<
{
// Properties injected from the parent component
fromParent: string;
},
undefined
{
// Properties mapped using redux dispatch
fromDispatch: () => void;
}
>;
const MyComponent: React.FC<MyComponentProps['all']> = (props) => (/*...*/);
export const ConnectedComponent = link<MyComponentProps /*, TState, TDispatch*/>(Component, {
mapDispatchToProps: (dispatch, propsFromParent) => ({
fromDispatch: () => {
/* ... */
}
})
});
Connect without mapping. react-redux-link
supports this case for sake of usage simplicity, although it doesn't make sense to connect a component to the redux store if it doesn't need to map any property:
import React from 'react';
import { link, ReduxComposedProps } from 'react-redux-link';
// ...
type MyComponentProps = ReduxComposedProps<{
// Properties injected from the parent component
fromParent: string;
}>;
const MyComponent: React.FC<MyComponentProps['all']> = (props) => (/*...*/);
export const ConnectedComponent = link<MyComponentProps /*, TState, TDispatch*/>(
Component,
undefined
);
Motivation
Every time I add redux to a React+Typescript project I struggle to add type checks on the components connect
call (from react-redux). What I usually end up doing is creating separate interfaces for each component, grouping the properties based on the its origin: provided from the parent component, provided from the redux state or provided using redux dispatch. The resulting components look something like this:
import React from 'react';
import { connect } from 'react-redux';
// ...
interface PropsFromParent {
fromParent: string;
// ...
// Properties injected from the parent component
}
interface PropsFromState {
fromState: string;
// ...
// Properties mapped from the redux state
}
interface PropsFromDispatch {
fromDispatch: () => void;
// ...
// Properties mapped using redux dispatch
}
type ComponentProps = PropsFromParent & PropsFromState & PropsFromDispatch;
const Component: React.FC<ComponentProps> = (props) => <div>{/*...*/}</div>;
export const ConnectedComponent = connect(
(state, propsFromParent): PropsFromState => ({ fromState: '...' }),
(dispatch, propsFromParent): PropsFromDispatch => ({
fromDispatch: () => {
/* ... */
}
})
)(Component);
I encounter two problems with this approach:
- For each component, multiple interfaces (up to 3) and a union type must be declared
- The
connect
method provides no type safety. Not only will accept as arguments mapping functions that return the wrong type, it will also accept being called without mapping functions at all, leaving the undefined property errors to be found at runtime
react-redux-link
is designed to resolved these two issues through the following two principles:
- Providing a single type to contain the separated interfaces: ReduxComposedProps. They will still exist under the hood, but the component developer doesn't need to declare them
- Providing a more descriptive
connect
method which checks theconnect
mappings' types: link. It just monkey patchesconnect
, but makes sure the component developer isn't missing any property
Using link
instead of connect
will raise typescript errors if a required mapping function isn't provided or if the provided functions doesn't return the expected types. Here is what the same component above would look like by using react-redux-link
:
import React from 'react';
import { link, ReduxComposedProps } from 'react-redux-link';
// ...
type ComponentProps = ReduxComposedProps<
{
fromParent: string;
// ...
// Properties injected from the parent component
},
{
fromState: string;
// ...
// Properties mapped from the redux state
},
{
fromDispatch: () => void;
// ...
// Properties mapped using redux dispatch
}
>;
const Component: React.FC<ComponentProps['all']> = (props) => <div>{/*...*/}</div>;
export const ConnectedComponent = link<ComponentProps>(Component, {
mapStateToProps: (state, propsFromParent) => ({
fromState: '...'
}),
mapDispatchToProps: (dispatch, propsFromParent) => ({
fromDispatch: () => {
/* ... */
}
})
});