React + TypeScript: useReducerを使ったカウンターのアプリケーションに型づけする

ReactにTypeScriptを使おうとすると、TypeScriptの基礎知識だけでは足りず、Reactの型について知らなければなりません。それで、戸惑うことも多いでしょう。そういう人たちのためにReactとTypeScriptの使い方をまとめたのが「React+TypeScript Cheatsheets」です。本稿では「useReducer」の項を参考に、useReducerフックで簡単なカウンターをつくってみます。

TypeScriptが加わったReactのひな型アプリケーションをつくる

TypeScriptを加えたReactのひな型アプリケーションは、Create React Appでつくりましょう。コマンドラインツールでnpx create-react-app アプリケーション名に、オプション--template typescriptを添えてください。

npx create-react-app react-typescript-usereducer --template typescript

アプリケーションのディレクトリ(react-typescript-usereducer)に切り替えて、npm startとコマンド入力すれば、ローカルサーバでひな型アプリケーションが開きます。

カウンターをつくる

まずは、リデューサのモジュール(src/reducer.ts)です。リデューサはJSX要素を返しませんので、拡張子は.tsxでなく.tsとしました(「【TypeScript】.ts拡張子と.tsx拡張子」参照)。リデューサ(reducer)に渡すふたつの引数(stateとaction)に型づけが要ります。型エイリアス(type aliases)で定めました。

src/reducer.ts

type STORE = { count: number };
type ACTIONTYPE =
    | { type: "increment" }
    | { type: "decrement" };
const reducer = (state: STORE, action: ACTIONTYPE) => {
    switch (action.type) {
        case "increment":
            return { count: state.count + 1 };
        case "decrement":
            return { count: state.count - 1 };
        default:
            return state;
    }
};

export default reducer;

つぎに、カウンターの表示と操作のモジュール(src/Counter.tsx)です。ここで、useReducerフックを使いました。TypeScriptの型推論が働きますので、型づけしなくても動きます。

src/Counter.tsx

import React from 'react';
import reducer from './reducer';

const initialState = { count: 0 };
const Counter = () => {
    const [state, dispatch] = React.useReducer(reducer, initialState);
    return (
        <div>
            <button onClick={() => dispatch({ type: "decrement" })}>
                -
            </button>
            <span>{state.count}</span>
            <button onClick={() => dispatch({ type: "increment" })}>
                +
            </button>
        </div>
    );
};

export default Counter;

ルートのモジュール(src/App.tsx)は、カウンターのコンポーネント(Counter)をimportしてJSX要素に差し込むように書き替えましょう。これでカウンターのアプリケーションは、とりあえず動きます(図001)。

src/App.tsx

// import React from 'react';
// import logo from './logo.svg';
import Counter from './Counter';
import './App.css';

function App() {
    return (
        <div className="App">
            {/* <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <p>
                    Edit <code>src/App.tsx</code> and save to reload.
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
            </header> */}
            <Counter />
        </div>
    );
}

export default App;

図001■ useReducerフックを使ったカウンター

型づけを加える

アロー関数式で変数(const)に定めたリデューサをReactの関数として型づけするのが、React.Reducerです。引数に状態とアクションを受け取って、状態を返します。引数の型はジェネリックで与えてください(「Typing a useReducer React hook in TypeScript」の「The type of useReducer」参照)。

src/reducer.ts

import React from 'react';

// const reducer = (state: STORE, action: ACTIONTYPE) => {
const reducer: React.Reducer<STORE, ACTIONTYPE> = (state, action) => {

};

関数コンポーネントを型づけるのは、React.FunctionComponentあるいはReact.FCです(「React+TypeScript Cheatsheets」の「Function Components」参照)。引数があれば、やはりジェネリックで型を与えられます。ただし、これらの型はTypeScriptの基本テンプレートから除かれますので、これからは使うことをお勧めしません。

型とは別に、コールバック関数はuseCallbackでメモ化しておきましょう(「Create React App 入門 09: useCallbackフックで無駄な処理を省く」参照)。

src/Counter.tsx

// import React from 'react';
import React, { useCallback } from 'react';

const Counter = () => {

    const decrement = useCallback(() => dispatch({ type: "decrement" }), []);
    const increment = useCallback(() => dispatch({ type: "increment" }), []);
    return (
        <div>
            {/* <button onClick={() => dispatch({ type: "decrement" })}> */}
            <button onClick={decrement}>
                -
            </button>

            {/* <button onClick={() => dispatch({ type: "increment" })}> */}
            <button onClick={increment}>
                +
            </button>
        </div>
    );
};

アクションのtypeを変数に入れる

リデューサのモジュール(src/reducer.ts)でアクションのtype(ACTIONTYPE)は、文字列のリテラル型(literal types)で定めました。ですから、型チェックはもちろん働きます。けれど、エディタのコード補完が利きません。そこで、変数に入れることにしましょう。ここでは、つぎのようにSymbol()を用いました。

src/reducer.ts

export const incrementType = Symbol('increment');
export const decrementType = Symbol('decrement');

type ACTIONTYPE =
    // | { type: "increment" }
    | { type: typeof incrementType }
    // | { type: "decrement" };
    | { type: typeof decrementType };
const reducer: React.Reducer<STORE, ACTIONTYPE> = (state, action) => {
    switch (action.type) {
        // case "increment":
        case incrementType:

        // case "decrement":
        case decrementType:

    }
};

型を定めた変数(decrementTypeとincrementType)はexportしましたので、他のモジュールもimportさえすればコード補完が利くのです。これで、タイプミスも減らせるでしょう。

src/Counter.tsx

// import reducer from './reducer';
import reducer, { decrementType, incrementType} from './reducer';

const initialState = { count: 0 };
const Counter = () => {
    const [state, dispatch] = React.useReducer(reducer, initialState);
    // const decrement = useCallback(() => dispatch({ type: "decrement" }), []);
    const decrement = useCallback(() => dispatch({ type: decrementType }), []);
    // const increment = useCallback(() => dispatch({ type: "increment" }), []);
    const increment = useCallback(() => dispatch({ type: incrementType }), []);

};

でき上がった作例は、サンプル001としてCodeSandboxに公開しました。それぞれのモジュールのコードや、具体的な動きについてはこちらをご覧ください。

サンプル001■React + TypeScript: Using useReducer

>> CodeSandboxへ