Help us understand the problem. What is going on with this article?

【Redux + Typescript】Formの値管理にはPartical型が生きる

Partical型

TypescriptにはPartical型というものが存在し、すべてのプロパティを省略可能にした型がある。

type User = {
  firstName: string;
  lastName: string;
  age: number;
  gender: "man" | "women" | "other";
};

type PartialUser = Partial<User>;

// こうなる
// type PartialUser = {
//    firstName?: string;
//    lastName?: string;
//    age?: number;
//    gender?: "man" | "women" | "other";
//}

Reduxでフォームの値を保持するケースも多々あるが、これを用いれば簡潔にReduxでのフォームの値管理を行える。

type

型を書いていく。今回はUser型のデータを入力するフォームの想定。

import { Action } from "redux";

export const ActionTypes = {
  userFormChange: "USER_FORM_CHANGE",
} as const;

// state型 Formと対応
export type User = {
  firstName: string;
  lastName: string;
  age: number;
  gender: "man" | "women" | "other";
};

// Action 型
type UserFormChangeAction = {
  type: typeof ActionTypes.userFormChange;
  payload: Partial<User>;
} & Action;

export type FormActionTypes = UserFormChangeAction;

ActionCreator

payloadには、Partical<User> 型、すなわちUser型オブジェクトの一部分を渡す。
このため型安全を保ちつつ、更新するフォームの値のみを渡すことができる。

export const userFormChangeAction = (user: Partial<User>): FormActionTypes => {
  return {
    type: ActionTypes.userFormChange,
    payload: user,
  };
};

Reducer

Object.assignを使って、前のstateとマージする。

const initialState: User = {
  firstName: "",
  lastName: "",
  age: 0,
  gender: "man",
};

export const FormReducer = (state = initialState, action: FormActionTypes):User => {
  switch (action.type) {
    case ActionTypes.userFormChange:
      // action.payloadはstateと同じ型の一部
      // { age: 20 }のように渡せばageだけが更新される。
      return Object.assign({}, state, action.payload);
    default:
      return state;
  }
};

conbineするだけなのでstore省略。

dispatch

ReactコンポーネントでFormを更新する例。

コンポーネント
import React from 'react';
import { useDispatch } from 'react-redux';

import { userFormChangeAction } from '../path/to/actions';

export const UserForm: React.FC = () => {
  const dispatch = useDispatch();
  const changeFirstName = (e: React.ChangeEvent<HTMLInputElement>) =>
    dispatch(userFormChangeAction({ firstName: e.target.value }));
  const changeLastName = (e: React.ChangeEvent<HTMLInputElement>) =>
    dispatch(userFormChangeAction({ lastName: e.target.value }));
  // 略

  return (
    <form>
      <input onChange={changeFirstName} />
      <input onChange={changeLastName} />
      {/* inputが続く... */}
    </form>
  );
};

似たような関数なので、まとめてしまうとスッキリ。

import React from 'react';
import { useDispatch } from 'react-redux';

import { userFormChangeAction } from '../path/to/actions';
import { User } from "../path/to/type/User"

export const UserForm: React.FC = () => {
  const dispatch = useDispatch();

  // handler関数を作成する関数
  const formHandler = (key: keyof User) => (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) =>
    dispatch(userFormChangeAction({ [key]: e.target.value }));
  // Formが大きくなっても簡潔に書ける
  const changeFirstName = formHandler("firstName"),
  const changeLastName = formHandler("lastName"),
  ...

  return (
    <form>
      <input onChange={changeFirstName} />
      <input onChange={changeLastName}/>
      {/* inputが続く... */}
    </form>
  );
};
  • keyof

keyof Userは、User型のプロパティのみを抜き出した型。

type User = {
  firstName: string;
  lastName: string;
  age: number;
  gender: "man" | "women" | "other";
};

type KeyOfUser = keyof User;

// type KeyOfUser = "firstName" | "lastName" | "age" | "gender"

これを引数にし、actionにわたすpayloadのオブジェクトを動的に変更する。

// オブジェクトのキーを動的に指定
{ [key]: value }

まとめ

ReduxでFormの値管理を試行錯誤していたらスッキリ書けました。
Typescriptは型のスクリプト言語だとかいうけど、その感覚がわかってくるとすごい楽しいですね。
大体のフォームはuseStateで済ませることも多いのですが、複数コンポーネントから参照、入力とかするとReduxが欲しくなってきますね。

あと本当はuseCallbackとか書く必要あるので注意。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした