Explore passing actions in Connector and @connect decorator?

[skevy]

It would be more convenient to not have to call bindActionCreators directly inside the component, so I was thinking that we might able to add something to Connector and the @connect decorator to make this nicer? In addition, that would prevent calling bindActionCreators in render every time (which would provide an extremely slight performance benefit :)).

It seems like the idea of "connecting" could mean connecting to stores AND/OR connecting to actions, if the user wanted. Seems like Connector is perfect to just mean..."hey, connect this component (or child component) to Redux".

Thoughts?

[skevy]

We could also continue to pass dispatch...no real reason NOT to do that I don't think.

[emmenko]

See #59 (comment)

[skevy]

Oh cool! Didn't see that. Yah that's exactly what I'm talking about.

[emmenko]

👍 :)

[skevy]

So, even though I think this is still a good idea, I think that even if we abstract binding of action creators into Connector...we're still going to have to bind on every render due to the fact that dispatch is passed through props. Am I right @acdlite ?

[gaearon]

we're still going to have to bind on every render due to the fact that dispatch is passed through props.

Yeah..

Maybe we can introduce some binding mechanism closer to the root, so all actions end up in this.props.actionCreators?

import * as actionCreators from './actions/index';
<Provider redux={redux} actionCreators={actionCreators}>

Decorator version:

@connect(state => ({
  blog: state.blog
}))
export default class BlogDetailApp {
  render() {
    return <PostDetail {...this.props.actionCreators.BlogActions} {...this.props} />;
  }
}

Container version:

<Connector select={select}>
  {({ someState, actionCreators }) => <PostDetail {...actionCreators.BlogActions} {...this.props} />}
</Connector>

The dispatch function would also be available (and also passed from the top).

[skevy]

Is there any bad thing about binding them higher up? In the current version, did you purposely choose not to do that? Or was it just something you hadn't gotten to yet?

I have a working version of a modified Connector and @connect that you can pass actions to...seems like a decent API and keeps actions modularized and localized to the components that need them, but has a downside of still binding in render all the time (though that's not a huge performance hit, obviously).

But I can see the benefits of the approach of binding higher up.

[gaearon]

I have a working version of a modified Connector and @connect that you can pass actions to

That's what we had but I was disappointed by the apparent complication of @connect. It felt too magical and tried to do many things (select data and bind actions) instead of just one.

but has a downside of still binding in render all the time (though that's not a huge performance hit, obviously).

It's not per se, but this makes it impossible for the contained component to implement shouldComponentUpdate efficiently. It'll get new functions every time. This is why I decided to remove that API.

Let's continue the discussion in #86

[skevy]

Good call. I'll explore in #86 doing your suggestion.

[gaearon]

Superseded by reduxjs/react-redux#1.

[gaearon]

This is now done in https://github.com/gaearon/react-redux/releases/tag/v0.5.0.