redux-formでどうやって値を更新するのか躓いた

4111 ワード
redux-form JavaScript React redux JavaScript テキストリンク

概要

本記事で扱う内容

  • 注目しているフォーム(FirstName or LastName or Email)が変更されれば、注目していないフォーム(check box)の値を更新する方法。（以下参照）

実装

Redux-formの最小構成を作成

  1. ベースとなるReactアプリを作成する。

最初にcreate-react-app your-app-nameコマンドを実行して、ベースとなるreactアプリを作成する。
また、yarn add redux react-redux redux-formコマンドを実行し、必要な物をインストールします。
　
2. ここからは、Redux-form公式に記載されている、手順通りに4つのステップを踏みます。

(公式通りなので省略。ベースとなるReactアプリソースコードGithub)
　

注目しているフォーム(FirstName or LastName or Email)が変更されれば、注目していないフォーム(check box)の値を更新

失敗

  • 悩んだ点
    • どうやってformからの入力以外でRedux-formで管理している値を変更するのだろう
      • 注目しているフォームの値が変更されたかどうかを検知する方法はどうするの？
        • touched? active? visited?とか使う？
        • 内容が書き換わっているかを比較する？
  • 考えた案
    • Redux-formがいい感じにラップしてくれているAction Creatorなどを書いて、それを無理やり適用する？

解決策

私が抱えている問題について検索をかけてもヒットしない。
そのため、最初は上記の案でゴリゴリ実装してました。一応動く状態は作れたけど、汚い、Redux-form使う意味あるのか、、、などと色々思いました。
公式を見直すと、redux-formのpropsとして、なんかchange functionと書かれた良い感じのものがありました。（公式）

これ使えば、Redux-formとかが良い感じにラップしてくれたまま、Action Creatorとかを使わずにいけるのでは？と思い、使ってみると、以下のように、onChange・・・と、3行追加するだけで、実現したかったことが実現できました。(ソースコードGithub))


        <Field
          name="firstName"
          component="input"
          type="text"
          onChange={(event, field) => {
            props.change('check', false);
          }}
        />

結論

Redux-formは今もなお、メンテナンスされているので、やりたいことは公式を読み進めると大方実現できる。
Redux-formを使えば、そんなに頑張らなくても良くなる。