如何使用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的道具

这是它说的......

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

有些东西需要将Smart Component中的Immutable.JS道具映射到Dumb Component中使用的纯JavaScript道具.这是一个高阶组件(HOC),只需从您的智能组件中获取Immutable.JS道具,并使用toJS()将它们转换为纯JavaScript道具,然后传递给您的Dumb组件.

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

通过将Immutable.JS对象转换为HOC中的纯JavaScript值,我们实现了Dumb Component的可移植性,但没有在Smart 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和mapStateToPropsDumbComponent。

可能值得解开这一切：

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)