将redux-form的formValueSelector迁移至处理mapState的HOC

我明白你想要把redux-form的表单值选择逻辑整合到负责处理mapState和mapDispatch的HOC里，让组件的状态连接逻辑更集中、更整洁。咱们可以通过调整代码结构，把这部分逻辑统一到connect的配置中，同时保持原有功能不变。

重构后的完整代码 #

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

class MainForm extends React.Component {
  render() {
    // 直接通过props访问从redux-form获取的字段
    const { isUsed, location } = this.props;
    return (
      /* 你的表单渲染内容，比如：
      <form onSubmit={this.props.handleSubmit}>
        <Field name="isUsed" component="input" type="checkbox" />
        <Field name="location" component="input" type="text" />
      </form>
      */
    );
  }
}

// 1. 创建对应表单的选择器
const mainFormSelector = formValueSelector('mainForm');

// 2. 统一处理mapStateToProps：整合表单值与其他全局状态
const mapStateToProps = (state) => {
  return {
    // 从redux-form的store中提取需要的字段
    isUsed: mainFormSelector(state, 'isUsed'),
    location: mainFormSelector(state, 'location'),
    // 如果需要其他全局状态，也可以在这里添加，比如：
    // currentUser: state.auth.user
  };
};

// 3. 统一处理mapDispatchToProps（如果有需要绑定的action）
const mapDispatchToProps = (dispatch) => {
  return {
    // 示例：绑定提交表单的action creator
    // submitMainForm: (values) => dispatch(submitMainFormAction(values))
  };
};

// 4. 先使用reduxForm包装组件，配置表单基础信息
const FormWithRedux = reduxForm({
  form: 'mainForm',
  // 可以添加其他redux-form配置，比如validate、destroyOnUnmount等
})(MainForm);

// 5. 最后用connect把状态和dispatch绑定到组件
export default connect(mapStateToProps, mapDispatchToProps)(FormWithRedux);

优化小技巧：批量获取表单值 #

如果需要从表单中获取多个字段，重复调用formValueSelector会有点繁琐，你可以改用getFormValues选择器批量获取：

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

// ...

const mapStateToProps = (state) => {
  // 批量获取表单的所有值（如果表单未初始化则返回空对象）
  const formValues = getFormValues('mainForm')(state) || {};
  return {
    isUsed: formValues.isUsed,
    location: formValues.location,
  };
};

注意事项 #

• 确保你的Redux store已经正确挂载了redux-form的reducer（默认挂载在form key下，如果自定义了key，需要在选择器中对应调整）。
• 如果表单包含嵌套字段，选择器支持路径写法，比如mainFormSelector(state, 'user.address.city')。

内容的提问来源于stack exchange，提问作者Shawn Matthews