使用redux connect函数传递props.children作为React元素

Question

I need a component that starts polling for data from an API as soon as it gets mounted and it stops when unmounted. The data must be available for a child component.

This is my current implementation skeleton

class External extends Component {
  render() {
    const ConnectedPoller = connect(/*cut*/)(Poller)

    return <ConnectedPoller {...this.props}>
      {this.props.children}
    </ConnectedPoller>
  }
}

class Poller extends Component {
  componentDidMount() {
    this.model.startPolling();
  }

  componentWillUnmount() {
    this.model.stopPolling();
  }

  render() {
    const children = React.Children.map(this.props.children, child => {
      return React.cloneElement(child, {...this.props});
    });

    return children;
  }
}

There are a few components that need these data, I can use my poller as their parent in this way

<External>
  <ComponentRequiringData {...this.props}>
</External>

This is working, but I would like to merge External into Poller . The problem is that I cannot find a way to do this

const ConnectedPoller = connect(/*cut*/)(this.props.children)

The connect function complains when I pass props.children instead of a "real" react element. Any suggestion?

DISCLAIMER: I don't poll at an ancestor level because it's a heavy resource-consuming task for the backend and I need those data only in a few components that are used rarely and are never rendered together in the same page.

Answer 1

The only reason to use redux' connect function, is if you want to connect to the state manangement - either get a the current state, or dispatch a function. Since you aren't doing any of these here, there is no reason to use connect . Also, while it might work, there is no reason to use connect inside a rendering function. This will recreate the commponent over and over again for no reason. I guess you are doing it because you want to pass the component with props, but connect can receive props from a parent element as a second argument.