React

【TypeScript・Redux ToolKit】特定の型だけを受け入れるActionCreaterを作る

React
この記事は約2分で読めます。

はじめに

Redux-ToolKitcreateAction()で定義するActionCreaterは、基本的にどんな引数も受け入れてしまいます。

受け付ける型を制限し、コントロールされたpayloadのみを受け入れるようにカスタムする方法を紹介します。

通常のActionCreater

createAction()の引数に与えたtypeを持つアクションオブジェクトを返すActionCreaterを定義できます。

import { createAction } from '@reduxjs/toolkit';

const addTodo = createAction('ADD_TODO');
addTodo('Study Redux with TypeScript');

// { type: "ADD_TODO", payload: "Study Redux with TypeScript" }

問題は、得られたActionCreaterであるaddTodo()という関数がどんな引数も受け入れてしまうことです。

ここでは、payloadとして文字列のみ受け付けたいとします。

特定の型だけを受け入れるActionCreater

ジェネリクスを与えます。これだけ。

const addTodo = createAction<string>('ADD_TODO');

まとめ

createAction<T>(arg)とすることで、特定の型だけを受け入れるActionCreaterを定義できました。