typescript-fsaで複数の値を渡したい時

はじめに

typescript-fsaで複数の値を渡す方法で少し考えてしまったので、解法を残します。

今回は、Todoリストを追加するactionを例にして、必要な部分のみを記載します。
関連するファイルは以下の通りです。

• actions.ts
• reducers.ts
• AddTodoContainer.tsx(container)
• AddTodo.tsx(component)

actions.ts

// typescript-fsa
import actionCreatorFactory from 'typescript-fsa';

const actionCreator = actionCreatorFactory();

export const addTodoActions = {
  addTodoAction: actionCreator<{ name: string, priority: string }>('ADD_PATH'),
};

actionCreatorFactory()の型部分で、渡す値の型を記載します。
actionCreator()の型部分は、1つのargumentしか受け付けません。

reducers.ts

// typescript-fsa
import { reducerWithInitialState } from 'typescript-fsa-reducers';

// redux
import {
  addTodoActions
} from './actions';

export const addTodoReducer = reducerWithInitialState(initialStateAddTodo)
  .case(addTodoActions.addTodoAction, (state, payload) => ({
    ...state,
    paths: state.todos.concat(

      // addTodo()は、既存のTodoリストにconcatで新たなTodoをいれるための関数です。
      addTodo(payload.name, payload.priority) 
    ),
  }))

payloadにnameとpriorityが格納されているため、それぞれを既存のTodoリストに追加します。
(今回はaddTodo()がその役割です。)

AddTodoContainer.tsx

// redux
import { Dispatch } from "redux";
import { addTodoActions } from '../actions'

// react-redux
import { connect } from "react-redux";

// components
import AddTodo from '../components/AddTodo'

export type AddTodoFormHandler = {
  handleAddTodo(todoName: string, priority: string ): void
}

const mapDispatchToProps = (dispatch: Dispatch) => {
  return {
    handleAddTodo: (name: string, priority: string) => { dispatch(addTodoActions .addTodoAction({ name, priority })) },
  }
};

export default connect(
  null,
  mapDispatchToProps
)(AddTodo);

関数のそれぞれの引数を記載します。
(今回はnameとpriority)

AddTodo.tsx

<button
  onClick={() => {
    props.handleAddTodo(name, priority );
  }}
>
  Add Todo
</button>

onClickしたときに、containerのhandleAddTodoに入力したnameとpriorityの値を渡します。