TypeScript で Redux アクションと Redux リデューサーを型指定する方法

2024-07-27

アクションの型指定

Redux アクションの型指定には、いくつかの方法があります。

列挙型を使用する

最も単純な方法は、列挙型を使用してアクションの型を定義することです。

enum ActionTypes {
  ADD_TODO = 'ADD_TODO',
  TOGGLE_TODO = 'TOGGLE_TODO',
  DELETE_TODO = 'DELETE_TODO',
}

上記のように、各アクションの型に名前を付けることができます。

アクションクリエーターは、対応する列挙型メンバーを使用してアクションを作成できます。

export const addTodo = (text: string): Action => ({
  type: ActionTypes.ADD_TODO,
  payload: text,
});

インターフェースを使用する

より複雑なアクションの場合は、インターフェースを使用して型を定義することができます。

interface AddTodoAction {
  type: ActionTypes.ADD_TODO;
  payload: string;
}

interface ToggleTodoAction {
  type: ActionTypes.TOGGLE_TODO;
  id: number;
}

interface DeleteTodoAction {
  type: ActionTypes.DELETE_TODO;
  id: number;
}

上記のように、各アクションの型にプロパティとその型を定義することができます。

export const addTodo = (text: string): AddTodoAction => ({
  type: ActionTypes.ADD_TODO,
  payload: text,
});

export const toggleTodo = (id: number): ToggleTodoAction => ({
  type: ActionTypes.TOGGLE_TODO,
  id,
});

export const deleteTodo = (id: number): DeleteTodoAction => ({
  type: ActionTypes.DELETE_TODO,
  id,
});

リデューサーの型指定

Redux リデューサーの型指定には、createReducer 関数を使用することができます。

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

const initialState: TodoState = {
  todos: [],
};

const todoReducer = createReducer(initialState, {
  [ActionTypes.ADD_TODO]: (state, action: AddTodoAction) => {
    state.todos.push({
      id: state.todos.length,
      text: action.payload,
      completed: false,
    });
  },
  [ActionTypes.TOGGLE_TODO]: (state, action: ToggleTodoAction) => {
    const todo = state.todos.find((todo) => todo.id === action.id);
    if (todo) {
      todo.completed = !todo.completed;
    }
  },
  [ActionTypes.DELETE_TODO]: (state, action: DeleteTodoAction) => {
    state.todos = state.todos.filter((todo) => todo.id !== action.id);
  },
});

上記のように、createReducer 関数に初期ステートとアクションハンドラーのオブジェクトを渡すことで、型指定されたリデューサーを作成することができます。

アクションハンドラーは、対応するアクションの型に基づいて引数を受け取るように型指定されます。

利点

型指定を行うことで、アクションとリデューサーの構造を明確にし、予期せぬエラーを防ぐことができます。
コードの可読性と保守性を向上させることができます。
IDE のサポートを活用することができます。

ファイル構成

src
├── actions.ts
├── reducers.ts
└── store.ts

actions.ts

enum ActionTypes {
  ADD_TODO = 'ADD_TODO',
  TOGGLE_TODO = 'TOGGLE_TODO',
  DELETE_TODO = 'DELETE_TODO',
}

interface AddTodoAction {
  type: ActionTypes.ADD_TODO;
  payload: string;
}

interface ToggleTodoAction {
  type: ActionTypes.TOGGLE_TODO;
  id: number;
}

interface DeleteTodoAction {
  type: ActionTypes.DELETE_TODO;
  id: number;
}

export const addTodo = (text: string): AddTodoAction => ({
  type: ActionTypes.ADD_TODO,
  payload: text,
});

export const toggleTodo = (id: number): ToggleTodoAction => ({
  type: ActionTypes.TOGGLE_TODO,
  id,
});

export const deleteTodo = (id: number): DeleteTodoAction => ({
  type: ActionTypes.DELETE_TODO,
  id,
});

reducers.ts

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

export interface Todo {
  id: number;
  text: string;
  completed: boolean;
}

export interface TodoState {
  todos: Todo[];
}

const initialState: TodoState = {
  todos: [],
};

export const todoReducer = createReducer(initialState, {
  [ActionTypes.ADD_TODO]: (state, action: AddTodoAction) => {
    state.todos.push({
      id: state.todos.length,
      text: action.payload,
      completed: false,
    });
  },
  [ActionTypes.TOGGLE_TODO]: (state, action: ToggleTodoAction) => {
    const todo = state.todos.find((todo) => todo.id === action.id);
    if (todo) {
      todo.completed = !todo.completed;
    }
  },
  [ActionTypes.DELETE_TODO]: (state, action: DeleteTodoAction) => {
    state.todos = state.todos.filter((todo) => todo.id !== action.id);
  },
});

store.ts

import { createStore } from '@reduxjs/toolkit';
import { todoReducer } from './reducers';

export const store = createStore(todoReducer);

使い方

import React from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

const Root = () => (
  <Provider store={store}>
    <App />
  </Provider>
);

export default Root;

このコードは、以下の機能を提供します。

actions.ts：アクションを定義します。
reducers.ts：リデューサーを定義します。
store.ts：ストアを作成します。

@reduxjs/toolkit を使用する

@reduxjs/toolkit は、Redux をより使いやすくするためのライブラリです。@reduxjs/toolkit には、アクションとリデューサーを型指定するためのユーティリティが含まれています。

例

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

const todoReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    case 'TOGGLE_TODO':
      return state.map((todo) =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    case 'DELETE_TODO':
      return state.filter((todo) => todo.id !== action.payload);
    default:
      return state;
  }
};

const store = configureStore({ reducer: todoReducer });

上記のように、createStore 関数を使用してストアを作成し、reducer オプションに型指定されたリデューサーを渡すことができます。

redux-actions を使用する

redux-actions は、Redux アクションを型指定するためのライブラリです。

import { createAction } from 'redux-actions';

const addTodo = createAction('ADD_TODO', (text) => ({
  type: 'ADD_TODO',
  payload: text,
}));

const toggleTodo = createAction('TOGGLE_TODO', (id) => ({
  type: 'TOGGLE_TODO',
  id,
}));

const deleteTodo = createAction('DELETE_TODO', (id) => ({
  type: 'DELETE_TODO',
  id,
}));

const todoReducer = (state = [], action) => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    case 'TOGGLE_TODO':
      return state.map((todo) =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    case 'DELETE_TODO':
      return state.filter((todo) => todo.id !== action.payload);
    default:
      return state;
  }
};

上記のように、createAction 関数を使用してアクションを作成することができます。createAction 関数は、アクションの型とペイロードの型を指定することができます。

手動で型指定を行う

上記の方法を使用せずに、手動で型指定を行うこともできます。

type ActionTypes = {
  ADD_TODO: { type: 'ADD_TODO'; payload: string };
  TOGGLE_TODO: { type: 'TOGGLE_TODO'; payload: number };
  DELETE_TODO: { type: 'DELETE_TODO'; payload: number };
};

const addTodo = (text: string): ActionTypes.ADD_TODO => ({
  type: 'ADD_TODO',
  payload: text,
});

const toggleTodo = (id: number): ActionTypes.TOGGLE_TODO => ({
  type: 'TOGGLE_TODO',
  id,
});

const deleteTodo = (id: number): ActionTypes.DELETE_TODO => ({
  type: 'DELETE_TODO',
  id,
});

const todoReducer = (state = [], action: ActionTypes): TodoState => {
  switch (action.type) {
    case 'ADD_TODO':
      return [...state, action.payload];
    case 'TOGGLE_TODO':
      return state.map((todo) =>
        todo.id === action.payload ? { ...todo, completed: !todo.completed } : todo
      );
    case 'DELETE_TODO':
      return state.filter((todo) => todo.id !== action.payload);
    default:
      return state;
  }
};

上記のように、アクションとリデューサーの型を手動で定義することができます。

どの方法を選択すべきか

どの方法を選択するかは、開発者の好みやプロジェクトの要件によって異なります。

シンプルさを重視する場合は、@reduxjs/toolkit を使用するのがおすすめです。
アクションの型をより細かく制御したい場合は、redux-actions を使用するのがおすすめです。
**完全な型制御が必要な場合は、手動で型指定を行う

typescript redux

TypeScriptで列挙型のような型を作成するサンプルコード

しかし、場合によっては、列挙型のような型を作成したい場合があります。これは、列挙型のすべての機能が必要ではない場合や、より柔軟な型が必要な場合に役立ちます。TypeScriptで列挙型のような型を作成するには、いくつかの方法があります。オブジェクトリテラルを使用する...

enums typescript

メソッドを使い分けてスッキリ記述！TypeScriptのメソッドオーバーロードで実現するエレガントなプログラミング

メソッドオーバーロードとは、同じ名前のメソッドを複数定義し、それぞれ異なる引数や戻り値を持つようにすることで、コードの可読性と保守性を向上させる手法です。TypeScriptでは、この機能を活用して、より柔軟で型安全なコードを書くことができます。...

javascript typescript operator overloading

メソッドを使い分けてスッキリ記述！TypeScriptのメソッドオーバーロードで実現するエレガントなプログラミング

TypeScript と Knockout.js を使用した Todo アプリケーションのサンプルコード

Knockout. js は、JavaScript フレームワークであり、DOM 操作とデータバインディングを容易にすることで、Web アプリケーション開発を簡素化します。TypeScript は、JavaScript の静的型付けスーパーセットであり、型安全性を向上させ、開発者の生産性を高めることができます。...

knockout.js typescript

TypeScript と Knockout.js を使用した Todo アプリケーションのサンプルコード

TypeScriptとJavaScriptの違いと利点

TypeScriptは、JavaScriptのスーパーセットであり、JavaScriptに静的型付けの機能を追加したプログラミング言語です。つまり、TypeScriptのコードはJavaScriptのコードとしても実行できますが、TypeScriptでは変数や関数の型を明示的に指定することができます。...

javascript typescript

JavaScriptとTypeScriptにおけるオープンエンド関数引数

この例では、sum関数は. ..numbersという引数を受け取ります。...演算子は、渡された引数を配列に変換します。そのため、numbers変数には、呼び出し時に渡されたすべての数値が格納されます。TypeScriptでは、引数の型も指定できます。この例では、sum関数はnumber型の引数のみを受け取るように定義されています。...

javascript typescript