Redux Formのvaluesについて

Question

フォームのところでRedux Formを使っており、チェックボックスにチェックを入れるとstate.form.フォーム名.valuesにフィールド名をkeyにしたboolean値が入るのですが、これを一つのチェックボックスのチェックを外すと連動して他のチェックボックスも外す(trueからfalseになる)ことができるapiなどあるのでしょうか?
formValuesSelectorを使ってみましたが、期待通りの挙動になりませんでした。
公式を見てもそれらしいものがなかったので、わかる方がいれば教えていただければと思います。

サンプルコード

下記のサンプルコードでlabel="A"とlabel="A-1"とlabel="A-2"にチェックが入ってる状態(state.form.RecordPrintDialog.values:{plan:true,info:true,comment:true})でlabel="A"のチェックを外すとlabel="A-1"とlabel="A-2"のチェクが外れる({plan:false,info:false,comment:false})

import React from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import RenderCheckbox from '@/common/reduxForm/Checkbox';

class PrintDialog extends React.Component {
  render() {
    return (
              <React.Fragment>
                <div>
                  <Field
                    name="plan"
                    label="A"
                    component={RenderCheckbox}
                  />
                </div>
                 <div>
                   <Field
                      name="info"
                      label="A-1"
                      component={RenderCheckbox}
                    />
                    <Field
                      name="comment"
                      label="A-2"
                      component={RenderCheckbox}
                    />
                  </div>
              </React.Fragment>
    );
  }
}

const mapStateToProps = state => {
  return {
    printOption: state.form.RecordPrintDialog,
  };
};

PrintDialog = reduxForm({
  form: 'RecordPrintDialog',
  enableReinitialize: true
})(PrintDialog);

export default connect(mapStateToProps)(PrintDialog);

Answer 1

自分はこの方法でよくやりますが

ドキュメントはこれです
https://redux-form.com/8.1.0/docs/api/props.md/#-code-change-field-string-value-any-function-code-

redux-formのprops内にchangeってfunctionがあります。
これを使って実現できると思います。

class PrintDialog extends React.Component {
  render() {
    const {
      change, // reduxFormのdecoratorで受け取れるようになっているはずです
    } = this.props;

    return (
              <React.Fragment>
                <div>
                  <Field
                    name="plan"
                    label="A"
                    component={RenderCheckbox}
                    onCheck={(event, checked) => {
                      // ウル覚えですが多分これで動くとは思います。
                      change("plan", checked);
                      change("info", false);
                      change("comment", false);
                    }}
                  />
                </div>
                 <div>
                   <Field
                      name="info"
                      label="A-1"
                      component={RenderCheckbox}
                      onCheck={(event, checked) => {
                        // ウル覚えですが多分これで動くとは思います。
                        change("plan", false);
                        change("info", checked);
                        change("comment", false);
                      }}
                    />
                    <Field
                      name="comment"
                      label="A-2"
                      component={RenderCheckbox}
                      onCheck={(event, checked) => {
                        // ウル覚えですが多分これで動くとは思います。
                        change("plan", false);
                        change("info", false);
                        change("comment", checked);
                      }}
                    />
                  </div>
              </React.Fragment>
    );
  }
}

これってラジオボタンの機能な気がするし、これが正しい方法かはわかりませんが。
一旦動きは作れると思います。

Comments

[moro123]

ご回答ありがとうございます。
質問した後、公式に書いてある `reducer.plugin` (https://redux-form.com/8.2.0/docs/api/reducerplugin.md/)を使って対応できましたが、props.changeの方がコードがシンプルになるので、こちらに修正したいと思います。