Skip to content
This repository was archived by the owner on Jan 11, 2023. It is now read-only.

[Refacoring] Make Redux Connect more explicit in Sources Tree#4454

Merged
jasonLaster merged 2 commits into
firefox-devtools:masterfrom
amelzer:make-redux-connect-more-explicit
Nov 15, 2017
Merged

[Refacoring] Make Redux Connect more explicit in Sources Tree#4454
jasonLaster merged 2 commits into
firefox-devtools:masterfrom
amelzer:make-redux-connect-more-explicit

Conversation

@amelzer

@amelzer amelzer commented Oct 21, 2017

Copy link
Copy Markdown
Contributor

Hey folks, when working on SourcesTree.js I noticed that the redux usage can be made more readable using a more explicit approach.

Summary of Changes

  • explicit import of used actions
  • ditch bindActionsCreators in favour of () => dispatch(myImportedAction())
  • explicitly name and define connect props

I think this makes it more readable and more accessible for newbies who don't have to follow a trail of imports to see where props are coming from.

@wldcordeiro wldcordeiro left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some comments but I support moving towards only having the action creators the component needs as well. So this is a good start.


const mapDispatchToProps = dispatch => {
return {
setExpandedState: () => dispatch(setExpandedState()),

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Redux automatically binds dispatch to an object of functions so we could make this look like

const actionCreators = {
  setExpandedState,
  selectSource
};

export default connect(mapStateToProps, actionCreators)(SourcesTree);

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is also a great way to do it!


render() {
const { setExpandedState, expanded } = this.props;
const expanded = this.props.expanded;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't get this change. You could have left it and made onExpand/onCollapse call it without this.props

@amelzer amelzer Oct 22, 2017

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The change was necessary after the explicit import of setExpandedState could have also renamed it, I guess.

highlightItems
} = this.state;

const onExpand = (item, expandedState) => {

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Both the functions are the same so how about toggleExpanded?

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

haha - it's small enough where this is fine too. Good either way

@jasonLaster

Copy link
Copy Markdown
Contributor

ping @amelzer

@codehag

codehag commented Nov 2, 2017

Copy link
Copy Markdown
Contributor

This looks great! cant wait to see it merged!

@amelzer

amelzer commented Nov 2, 2017

Copy link
Copy Markdown
Contributor Author

@jasonLaster @codehag @wldcordeiro So with just the action creators (no usage of dispatch) this would be good to go? I can update it then.

@jasonLaster

Copy link
Copy Markdown
Contributor

yep

@amelzer amelzer force-pushed the make-redux-connect-more-explicit branch from bfbd3f1 to bfe099d Compare November 15, 2017 19:05
@jasonLaster jasonLaster merged commit b800f2e into firefox-devtools:master Nov 15, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants