redux-form の form プロパティの valuesの中身を階層化する方法

背景

実務でformプロパティ内を階層分けし、データを分け、rails側でデータを抽出しやすくしたい場面がありました。

redux-formの公式ドキュメントをもとに色々調べていくうちにform プロパティのvaluesの中身を階層化する方法を見つけたので、記事にまとめました。

redux-formを用いて formプロパティの valuesの中身を階層化してreduxで管理したいといった方の参考になれば幸いです。

結論

下記のように name に「. (ドット)」で繋げることで、values > friend > firstName のような階層分けをすることができます。

<Field name="friend.firstName" component={renderField} />

解説

今回は、formプロパティのvaluesの中身を階層化させる方法を説明するため、下記のような入力フォームを作成しました。

今回作成した入力フォーム

下記が今回実装したコードでform プロパティの valuesの中身を階層化した部分です。

src/components/FriendForm/FriendProfileForm.jsx

import React from 'react'
import { Field } from 'redux-form';
import renderField from '../Common/renderField';

const FriendProfileForm = () => {

  return (
    <>
      <Field
        name="friend.firstName"
        component={renderField}
        type="text"
        placeholder="First Name"
        label="友達の名前（性）"
      />
      <Field
        name="friend.lastName"
        component={renderField}
        type="text"
        placeholder="Last Name"
        label="友達の名前（名）"
      />
      <Field
        name="friend.age"
        component={renderField}
        type="text"
        label="友達の年齢"
      />
      <Field
        name="friend.job"
        component={renderField}
        type="text"
        label="友達の職業"
      />
    </>
  );
}

export default FriendProfileForm;

src/components/MyForm/ProfileForm.jsx

import React from 'react'
import { Field } from 'redux-form';
import renderField from '../Common/renderField';

const ProfileForm = () => {

  return (
    <>
      <Field
        name="user.firstName"
        component={renderField}
        type="text"
        placeholder="First Name"
        label="自分の名前（性）"
      />
      <Field
        name="user.lastName"
        component={renderField}
        type="text"
        placeholder="Last Name"
        label="自分の名前（名）"
      />
      <Field
        name="user.age"
        component={renderField}
        type="text"
        label="自分の年齢"
      />
      <Field
        name="user.job"
        component={renderField}
        type="text"
        label="自分の職業"
      />
    </>
  );
}

export default ProfileForm;

結論の箇所にも書かせていただきましたが、name="friend.firstName"　のように「. （ドット）」で name を繋げることで、values配下に values > friend > firstName といった形でreduxのstoreの中身を管理することができます。

下記が redux dev tools のstoreで管理されている今回作成した入力フォームのformの中身です。

redux dev tools storeの中身（下記のvalues配下の「user」と「friend」に注目してください。）

redux dev tools の storeの中身を確認すると、formプロパティのvaluesの中で「user」と「friend」というかたちで階層化することができていることを確認することができました。

まとめ

今回、redux-formを用いて form プロパティの valuesの中身を階層化する方法を解説いたしました。

普段 form プロパティ の values配下を階層化したいと思うことはないですが、rails側へ送信したいデータが似たようなデータであったため、階層分けすることでreduxのstoreで管理しやすくなると思い実装してみました。

redux-formのvaluesの階層化には「FieldArray」といったものもあるので、今後は今回実装した内容とどのような違いがあるのかを見比べていきたいです。
また、複数の入力フォームを実装するときにFieldArrayと今回の実装方法のどちらを使用するのが適切なのかを見極めた上で使用していきたいです。