はじめに
Redux-ToolKitにcreateAction()で定義する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を定義できました。