reactjs - 如何使用 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 属性转换为dumb组件的 JavaScript 属性

需要将智能组件中的 Immutable.JS 属性映射到dumb组件中使用的纯 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组件的可移植性，但没有在智能组件中使用 toJS() 的性能损失。

这是我的示例代码!!

dumb组件

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));

我的问题

导出默认连接(mapStateToProps)(toJS(DumbComponent))； 这甚至不导出 SmartComponent 本身。子组件是DumbComponent的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);

dumb组件

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 并不是真正智能。它只是一个渲染另一个dumb组件的dumb组件。这个术语让这个评论显得非常严厉。 🤔

澄清您的评论:

如果您想要在连接的组件和通过 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)