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 。我将用户输入的搜索条件存储在我的 Search reducer 中，以同步不同形式的 select 列表的自动填充等。

redux-form---->react-select(字段A) ---->反应-select（字段 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属性必须是一个JS数组：-

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

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

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

来自 Redux 不可变指南的 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 和 connect() 与 FormFieldA 解析不可变映射的示例中间智能组件：-

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

不要太担心最佳实践，今天的最佳实践就是明天的反模式。不要误会我的意思，了解 "best" 做事的方式是件好事，但最好的总是相对的，所以要考虑到这一点。

想法是您的 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)

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

React/Redux/Immutable - confusion regarding strategy for HOC with child component

immutability

reactjs

immutable.js

react-redux

higher-order-components