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

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

redux-form ----＆gt; react-select（字段A） ----＆gt; react-select（字段B）

My 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组件中的选项prop必须是JS数组： -

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

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

我的问题是，我如何加入这个？正如您在上面的代码中所看到的，现在我的MainSearchForm连接到Redux存储，以检索作为react-select选项props的选项所需的选项数据。答案是没有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解析（）的中间智能组件示例： -

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＆amp; amp;不可改变，并且需要考虑很多。但我认为我终于掌握了范式。

Answer 1

不要过于担心最佳做法，今天的最佳做法是明天的反模式。不要误解我很高兴知道什么是“最好的”做事方式，但最好的总是相对的，所以考虑到这一点。

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

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

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

将FormFieldA和FormFieldB保持原样，非常愚蠢，等待一系列简单的选项。

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

例如，根据您的情况，我会有 MainSearchForm 和 MainSearchFormContainer

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)

容器：

{{1}}

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

1 个答案: