Connected components may not be stateless

[babakness]

reduxjs/react-redux#141

The component returned by connect doesn't allow for refs ie <Component ref='foobar' />. React gives warning "Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail."

[babakness]

For reference my current workaround is to connect explicitly using const boundActions = bindActions(actions,store) then to do something like the following

<Foo ref="bar" {...boundActions} {...store.getState()} />

Along with store.subscribe( () => this.forceUpdate() )

[matheusml]

Hi @babakness, thanks for this.

Do you have a solution in mind?

[jetako]

I think this is partially resolved in master via #98.

connect was changed to return a regular Component instead of a function. However, ref might point to the outer HOC, not the wrapped component as you may want.

[matheusml]

Maybe the solution to this is to pass down the ref prop to the component that's being HOC'd.

What you think @babakness, @jetako?

[jetako]

@matheusml I would consider following the approach taken by react-redux. connect accepts an opt-in withRef option. When true, ref points to the wrapped component.

[matheusml]

@jetako ok, that's a valid option.

Could you please open a PR with this?

[jetako]

@matheusml Afraid I won't have the bandwidth for this any time soon. @babakness ?

[brennanerbz]

export default function connect(mapToProps, actions = {}) {
  return Child => {
    return React.forwardRef((props, ref) => {
      return (
        <Connect {...props} mapToProps={mapToProps} actions={actions}>
          {mappedProps => <Child ref={ref} {...mappedProps} {...props} />}
        </Connect>
      );
    });
  };
}

[leobetosouza]

I need this feature... I will work on it after #119

[leobetosouza]

To imprementing the solution using React.forwardRef we need to upgrade React to at least React 16.3

And, as recommended is React Docs, increase a major version of redux-zero.

This is OK, @matheusml?

[matheusml]

Yes it is, @leobetosouza