如何使用Redux Doc中解释的更高阶组件？

Question

有人可以帮我理解如何使用redux文档中解释的高阶组件吗？

我知道高阶分量是什么，我已经多次使用过这个模式，但我无法弄清楚如何使用这个高阶分量。

http://redux.js.org/docs/recipes/UsingImmutableJS.html#use-a-higher-order-component-to-convert-your-smart-components-immutablejs-props-to-your-dumb-components-javascript-props

这就是它所说的......

使用高阶组件将Smart Component的Immutable.JS道具转换为Dumb Component的JavaScript道具

需要将Smart Component中的Immutable.JS道具映射到Dumb Component中使用的纯JavaScript道具。这是一个高阶组件（HOC），它只是从你的智能组件中获取Immutable.JS道具，并使用toJS（）将它们转换为纯JavaScript道具，然后传递给你的哑组件。

以下是此类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} />
}

这就是你在智能组件中使用它的方法：

import { connect } from 'react-redux'

import { toJS } from './to-js'
import DumbComponent from './dumb.component'

const mapStateToProps = state => {
    return {
        // obj is an Immutable object in Smart Component, but it’s converted to a plain
        // JavaScript object by toJS, and so passed to DumbComponent as a pure JavaScript
        // object. Because it’s still an Immutable.JS object here in mapStateToProps, though,
        // there is no issue with errant re-renderings.
        obj: getImmutableObjectFromStateTree(state)
    }
}
export default connect(mapStateToProps)(toJS(DumbComponent))

通过在HOC中将Immutable.JS对象转换为纯JavaScript值，我们实现了Dumb Component的可移植性，但没有在智能组件中使用toJS（）的性能。

这是我的示例代码!!

DumbComponent

import React from 'react';

const DumbComponent = (props) => {

    const {dataList} = props;

    const renderList = (list) => {

        return list.map((value) => {
            return <li>value</li>
        })

    };

    return (
        <ul>
            {renderList(dataList)}
        </ul>
    )
};

export default DumbComponent;

SmartComponent

import React, { Component } from 'react';
import { connect } from 'react-redux';

import DumbComponent from './DumbComponent';

//High Order Component
import toJS from './toJS'; 

class SmartComponent extends Component {

    constructor(props) {
        super(props);
    }

    render() {
        return (
            <DumbComponent dataList={this.props.dataList} />
        );
    }

}


function mapStateToProps(states) {
    return {
        //Let's say this is immutable.
        dataList: state.dataList,
    };
}

//this is how I use Higher Order Component.
//export default connect(mapStateToProps)(SmartComponent);


export default connect(mapStateToProps)(toJS(DumbComponent));

我的问题

export default connect(mapStateToProps)(toJS(DumbComponent)); 这甚至不会导出SmartComponent本身。如果子目录DumbComponent的SmartComponent的父组件如何甚至不导出，它如何使用SmartComponent？

请告诉我如何在我为此帖准备的示例代码中使用此高阶组件。

更新

那么，这是正确的写作方式吗？

SmartComponent

import React, { Component } from 'react';
import { connect } from 'react-redux';

import DumbComponent from '../components/DumbComponent';

class SmartComponent extends Component {

  constructor(props) {
    super(props);
  }


  render() {

    return (
      <DumbComponent dataList={this.props.dataList} /> //immutable
    );

  }
}


function mapStateToProps(states) {
  return {
    dataList: state.dataList //immutable
  };
}


export default connect(mapStateToProps)(SmartComponent);

DumbComponent

import React from 'react';
import toJS from './higher_order_components/toJS';


const DumbComponent = (props) => {

  const {dataList} = props;

  const renderList = (list) => {

    return list.map((value) => {
      return <li>{value}</li>
    })

  };

  return (
    <ul>
      {renderList(dataList)}
    </ul>
  )

};


export default toJS(DumbComponent);

Answer 1

当您执行以下操作时：

let Component = connect(mapStateToProps)(OtherComponent)

Component“智能”，因为它可以访问商店。你在代码中所做的就是加倍智能组件。

class OtherSmartComponent {
  render { return <DumbComponent {...smartProps} /> }
}
let SmartComponent = connect(mapStateToProps)(OtherSmartComponent)

这就是智能组件示例中没有中间智能组件的原因，只有connect，mapStateToProps和DumbComponent。

可能值得解开这一切：

import DumbComponent from './DumbComponent'
import toJS from './toJS'

let DumbComponentWithJSProps = toJS(DumbComponent)
let SmartComponent = connect(mapStateToProps)(DumbComponentWithJSProps)

export default SmartComponent

实际上，在您的代码中，SmartComponent并不是很聪明。它只是一个愚蠢的组件，呈现另一个愚蠢的组件。这个术语使得这个评论看起来非常苛刻。

澄清你的评论：

如果您想在连接的组件和通过toJS的组件之间创建组件，请执行此操作。无需拨打connect两次：

// Dumb.js
import toJS from './toJS

class Dumb { .. }

export default toJS(Dumb)

-----------------------------------

// Smart.js
import Dumb from './Dumb'

class Smart {
  ..methods..
  render() { return <Dumb {...props} /> }
}

export default connect(mapStateToProps)(Smart)