Redux Formのハマりポイント

前書き

Advent Calendar 2018の21日目の記事です

Redux Formについてです。

Redux Formを使ってみて情報見つけるのに苦労したので
自分の備忘録の意味も込めて残しました。

package.jsonはこんな感じでやりました。最新版では確認してません。

package.json

    "react-redux-form": "^1.14.0",
    "redux-form-material-ui": "^4.3.0",

Material-UIでのフォームはこのドキュメントのコンポーネントを参照するのがいいです。

準備

まずインポート

import { change } from 'redux-form';

こうすれば後のバリデーションやフィールド内の変更時に対応できる。

  return {
    validate: validate,
    onChange: onChange,
  }

バリデーション

先ほどのvalidate: validate,の部分の設定でリンクされてます。
こうすればrequiredFieldsにある

const validate = values => {
  const errors = {};

  const requiredFields = [
    'hoge',
    'bar'
  ];

  requiredFields.forEach(field => {
    if (!values[field]) {
      errors[field] = field + 'が未入力です。';
    }
  });

  return errors;
}

formのボタンを押下した時にバリデーション
this.propsにhandleSubmitにある。

        const { handleSubmit } = this.props;

        return (
          <form style={wellStyles}>
            // 省略〜〜〜
            <RaisedButton
              type="button"
              label="ボタンだぜ"
              primary={true}
              onClick={handleSubmit(() => this.hoge())}
            />
          </form>
        );

handleSubmitからリンクされた
hoge()メソッドの返り値がtrueかfalseかでフォームを可能かどうかを決定させることができる。

フォーム変更時にフォーム内を動的にテキスト入れたりするには？

先ほどのonChange: onChange,からリンクされてます
hogeFormと言うのは自分でつけたformの名前です。
こんな感じならhogeと言うフィールドに変化があった時にだけ、'bar'と言う文字列を無理やり入れたりできます。

const onChange = (values, dispatch, _, previousValues) => {
  if (values['hoge'] !== previousValues['hoge']) {
    dispatch(change('hogeForm', 'hoge', 'bar'));
  }
}

細かい部分は色々端折りましたが、
参考になればと思います。