如何使用 Redux 文档中解释的这个高阶组件？

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

内容如下...

使用高阶组件将智能组件的 Immutable.JS 道具转换为哑组件的 JavaScript 道具

需要将智能组件中的 Immutable.JS 道具映射到哑组件中使用的纯 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 组件的可移植性，但没有在智能组件中使用 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;

智能组件

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 本身。 SmartComponent 的子组件是DumbComponent 的父组件连export 都不导出怎么用？？

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

更新

那么，这是正确的写法吗？

智能组件

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 是 "smart" 因为它可以访问商店。您在代码中所做的是加倍使用智能组件。

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)

如何使用 Redux 文档中解释的这个高阶组件？

How to use this higher order component explained in the Redux Doc?

reactjs

immutable.js

redux

react-redux

使用高阶组件将智能组件的 Immutable.JS 道具转换为哑组件的 JavaScript 道具

这是我的示例代码！！

DumbComponent

智能组件

我的问题

更新

智能组件

DumbComponent