DPA

TypeScript で react-router + Redux を使う（mapStateToProps編）

React Redux

react-router と Redux を組み合わせるときは、withRouter を使うことでコンポーネントに history や location (URLパスやクエリ) などを渡すことができる。 それを Redux の mapStateToProps でゴニョゴニョすることでURLパスやクエリとStoreのデータを組み合わせることができる。

その際、mapStateToProps = (state, props) => {...} の props にどのような型をつければいいか調べたのでメモ

TL;DR

RouteComponentProps を使う。

使い方

通常のURLの場合、RouteComponentProps<{}> とする。

"/users/:userId" のような形で、URL内にユーザーIDなどのパラメータがある場合、RouteComponentProps<{userId: string}> のように、パラメータの型を引数に与える。

import { connect } from 'react-redux'
import { RouteComponentProps, withRouter } from 'react-router-dom'

// URLにパラメータがない場合
const mapStateToProps = (_, props: RouteComponentProps<{}>) => {
    console.log(props)
    return {
      ...
    }
  }

// URLにパラメータがある場合
const mapStateToProps = (_, props: RouteComponentProps<{userId: string}>) => {
    console.log(props)
    return {
      ...
    }
  }

解説

react-router の index.d.ts を抜粋すると以下のようになっている。

import * as H from 'history';

export interface RouteComponentProps<P, C extends StaticContext = StaticContext> {
  history: H.History;
  location: H.Location;
  match: match<P>;
  staticContext: C | undefined;
}

export interface match<P> {
  params: P;
  isExact: boolean;
  path: string;
  url: string;
}

この RouteComponentProps が、 withRouter が渡す引数の型とドンピシャなのでこれを使う。 よくみると第一引数 P を match<> に渡しており、この P でURLパラメータの型を指定できる。