React/Redux/Immutable - 与子组件的 HOC 策略混淆

Question

我希望我能以问题的形式理解所有这些。在过去的 7 个小时左右，我一直在努力解决这个问题，但没有成功。此时我的大脑已经干涸，无论如何我都处于死胡同。

我正在使用 react 15.6.1、redux 3.7.1、react-redux 5.0.5、redux-immutable 4.0.0、redux-form 7.2.0、react-select 1.2.1.

我的应用程序具有使用 2 种不同表单（不同页面的不同表单）的字段 A 和字段 B 的搜索功能。我不认为这对这个问题很关键，但我正在使用 redux-form 和 react-select 作为表单和搜索字段。我将用户输入的搜索条件存储在我的搜索缩减器中，以同步不同表单中选择列表的自动填充等。

redux-form---->react-select(字段 A) ---->反应选择（字段B）

我的 Search reducer 在 initialState() 中使用 Immutable.fromJs()。减速器按预期工作。我遇到的问题是在哪里使用 HOC 以便将从 reducer 返回的 Map 对象转换为 react-select 组件所需的 JS 数组。

MainSearchForm.js：-

import React, {Component} from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'

import FormFieldA from './FormFieldA'
import FormFieldB from './FormFieldB'

class MainSearchForm extends Component {

  render() {

    return(
    <form>
      <FormFieldA options={this.props.fieldAoptions}/>
      <FormFieldB options={this.props.fieldBoptions}/>
    </form>
    )
  }
}

function mapStateToProps ({Search}, props) {
  return {
    fieldAoptions: Search.get('fieldAoptions'),
    fieldBoptions: Search.get('fieldBoptions'),
  }
}

MainSearchForm = connect(mapStateToProps,{})(MainSearchForm);

export default reduxForm({
  form: 'main-search',
})(MainSearchForm)

为了简单的示例，FormFieldA 和 FormFieldB 组件都遵循相同的：-

import React, {Component} from 'react'
import Select from 'react-select';

class FormFieldA extends Component {

  render() {

    const handleOnChange = (value) => {
      // call dispatch here
    }

    return(
      <Select
        name="field-a-input"
        id="field-a"
        options={this.props.options}
        onChange={handleOnChange}
      />
    )
  }
}

export default FormFieldA

所以react-select组件中的options prop必须是JS数组：-

options: [
    { label: 'Red' },
    { label: 'Green' },
    { label: 'Blue' }
]

我可以使用 Immutable.toJS() 进行转换，但 Redux 官方指南出于性能原因建议不要这样做，建议 this pattern 使用（我假设可重用）HOC 组件将不可变映射解析为 JS 数组。

我的问题是，我将如何合并它？正如您在上面的代码中看到的，现在我的 MainSearchForm 正在连接到 Redux 存储以检索作为 react-select 选项道具的选项所需的选项数据。答案是不是没有 MainSearchForm，而是为 MainSearchForm 呈现的每个字段都有一个中间组件，这个中间组件在使用 connect 之前调用 HOC，如指南中所示：-

来自 Redux Immutable 指南的 HOC：-

import React from 'react'
import { Iterable } from 'immutable'

export const toJS = WrappedComponent => wrappedComponentProps => {
  const KEY = 0
  const VALUE = 1

  const propsJS = Object.entries(
    wrappedComponentProps
  ).reduce((newProps, wrappedComponentProp) => {
    newProps[wrappedComponentProp[KEY]] = Iterable.isIterable(
      wrappedComponentProp[VALUE]
    )
      ? wrappedComponentProp[VALUE].toJS()
      : wrappedComponentProp[VALUE]
    return newProps
  }, {})

  return <WrappedComponent {...propsJS} />
}

通过 HOC 解析 Immutable Map 并使用 FormFieldA 进行 connect() 的示例中介智能组件：-

import { connect } from 'react-redux'
import { toJS } from './to-js'
import FormFieldA from './FormFieldA'

    function mapStateToProps ({Search}, props) {
      return {
        fieldAoptions: Search.get('fieldAoptions'),
      }
    }
export default connect(mapStateToProps)(toJS(FormFieldA))

这是最佳做法吗？

我衷心感谢您对此提供的任何帮助。这是我第一次与 HOC 和 Immutable 合作，有很多东西可以吸收。但我想我终于掌握了这个范式。

Answer 1

不要太担心最佳实践，今天的最佳实践就是明天的反模式。不要误会我的意思很高兴知道什么是“最好”的做事方式，但最好的总是相对的，所以要考虑到这一点。

这个想法是你的 FormFieldA 和 FormFieldB 不应该关心 redux、immutable、foobar、bajouras、wtvLibraryOrToolThatMightCome。

所以你的 HOC，对于不可变应该在你的 MainSearchForm 中：

import React, {Component} from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'

import { toJS } from './to-js'

import FormFieldA from './FormFieldA'
import FormFieldB from './FormFieldB'

class MainSearchForm extends Component {

  render() {

    return(
    <form>
      <FormFieldA options={this.props.fieldAoptions}/>
      <FormFieldB options={this.props.fieldBoptions}/>
    </form>
    )
  }
}

function mapStateToProps ({Search}, props) {
  return {
    fieldAoptions: Search.get('fieldAoptions'),
    fieldBoptions: Search.get('fieldBoptions'),
  }
}

MainSearchForm = connect(mapStateToProps,{})(toJS(MainSearchForm));

export default reduxForm({
  form: 'main-search',
})(MainSearchForm)

让您的 FormFieldA 和 FormFieldB 保持原样，非常愚蠢，只是等待一个简单的选项数组。

这只是个人口味，但我通常什至将组件与 redux 的东西分开。

例如，对于您的情况，我将有 MainSearchForm 和一个 MainSearchFormContainer

import React, {Component} from 'react'
import FormFieldA from './FormFieldA'
import FormFieldB from './FormFieldB'

class MainSearchForm extends Component {

  render() {

    return(
    <form>
      <FormFieldA options={this.props.fieldAoptions}/>
      <FormFieldB options={this.props.fieldBoptions}/>
    </form>
    )
  }
}

export default MainSearchForm

还有容器：

import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'
import MainSearchForm from './MainSearchForm'
import { toJS } from './to-js'

function mapStateToProps ({Search}, props) {
  return {
    fieldAoptions: Search.get('fieldAoptions'),
    fieldBoptions: Search.get('fieldBoptions'),
  }
}

const MainSearchFormContainer = connect(mapStateToProps,{})(toJS(MainSearchForm));

export default reduxForm({
  form: 'main-search',
})(MainSearchFormContainer)