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

Question

Can someone help me understand how to use this higher order component described in redux document?

I know what a higher order component is, and I have used this patter several times, but I cannot figure out how to use this higher order component.

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

That's what he says ...

Use a higher order component to convert your Smart Components Immutable.JS components to your JavaScript Dumb Components

Something needs to match the Immutable.JS details in your Smart Component with the pure JavaScript details used in your Dumb Component. This is something like a higher order component (HOC) that simply takes Immutable.JS details from your Smart Component and converts them using toJS () into regular JavaScript details, which are then passed to your Dumb Component.

Here is an example of such a 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} />
}

And here is how you could use it in your Smart Component:

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

By converting Immutable.JS objects to normal JavaScript values ​​in HOC, we achieve Dumb Component component incompatibility, but without performance errors when using the jS () function in Smart Component.

Here is my sample code for this!

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;

Smartcompponent

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

My question

export default connect(mapStateToProps)(toJS(DumbComponent)); SmartComponent. SmartComponent, DumbComponent SmartComponent, ?

, , , .

Update

, ?

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)

Smart Component , 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)