使用 Redux 形式的依赖字段访问字段值答案

【问题标题】：Access a Field value with Redux-form - dependent Fields使用 Redux 形式的依赖字段访问字段值
【发布时间】：2017-01-18 19:37:05
【问题描述】：

我有一个带有 redux-form HOC 的装饰组件，我想从装饰组件访问字段值以启用/禁用和隐藏/显示其他字段。最好的方法是什么？

我尝试使用 Fields 组件在依赖字段中进行操作，但这会损害装饰组件的性能，因为它会引发无用的重新渲染

也可以用redux连接修饰组件，使用redux-form提供的formValueSelector，但我想知道是否有更好的方法来访问字段值。

【问题讨论】：

标签： reactjs redux redux-form

【解决方案1】：

表单选择器和字段相关值在here 中进行了描述。解决方案基于getFormValues：

import React from 'react';
import { connect } from 'react-redux';
import { reduxForm, getFormValues } from 'redux-form';

import FormComponent from './form.component';

export const FormContainer = props => {
  const submitForm = (formValues) => {
    console.log('submitting Form: ', formValues);
  }

  return (
    <FormComponent
      formValues={props.formValues}
      change={props.change}
      onSubmit={submitForm}
      handleSubmit={props.handleSubmit}
    />
  );
}

const mapStateToProps = state => ({
  formValues: getFormValues('my-very-own-form')(state),
});
const formConfiguration = {
  form: 'my-very-own-form',
}

export default connect(mapStateToProps)(
  reduxForm(formConfiguration)(FormContainer)
);

在你的 formComponent 中，你可以从 props 中获取 formValues：

export const FormComponent = ({ handleSubmit, onSubmit, formValues }) => {
}

【讨论】：