reactjs - 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) ----> react 选择(字段B)

我的搜索缩减器在initialState() 中使用Immutable.fromJs()。 reducer 按预期工作。我遇到的问题是在哪里使用 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属性必须是一个JS数组:-

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

我可以使用 Immutable.toJS() 转换它，但出于性能原因，Redux 官方指南建议不要这样做，推荐 this pattern使用(我假设可重用的)HOC 组件将 Immutable Map 解析为 JS 数组。

我的问题是，我将如何合并它？正如您在上面的代码中所看到的，现在我的 MainSearchForm 正在连接到 Redux 存储以检索作为 react 选择选项 Prop 的选项所需的选项数据。答案是不使用 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 解析不可变映射并使用 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)