Redux: How do I use connect()() properly?

[TheBeardedLlama]

Allow me to preface my question by saying I'm a redux noob.

In addition, I'm not quite sure this is the right forum to ask this question, so please be lenient in your responses. I don't believe this is a usage question, as described in the guidelines, but I could very well be wrong.

I am slightly confused about how to use connect properly when creating a container component.

In particular, I am referring to the two ways I have seen this being called and the implications thereof:

• Method 1

export default connect(
  state => state.modal
)(ModalRoot)

• Method 2

const HidefulModal = connect(
  mapStateToProps,
  mapDispatchToProps
)(Modal);

I have failed to find sufficient explanation as to the usage of connect in the documentation and the various examples strewn around the web.

As such I would welcome an explanation of the two methods above (are there more?). In particular, I would welcome any pointers in regard to how the state is referenced and passed in both methods and what state actually means in this instance. Also how it relates to state as used in the associated reducers?

This could of course stem from insufficient understanding of state and what it means at various parts of the system.

Please do let me know if I should repost somewhere else and/or if you require additional information.

[aweary]

Hey @TheBeardedLlama, connect() isn't actually part of Redux core (which is why there is no documentation for connect() in this repo), it's part of the react-redux package.

Check out the docs on connect() in the react-redux package for a really great, in-depth overview of what arguments connect takes and what they do.

Your two examples are only different in that Method 1 uses an inline arrow function for mapStateToProps, and doesn't pass any mapDispatchToProps options. I highly recommend reading the docs I linked above, they should clear things up.

[gaearon]

These are two ways to write the same thing. Comes down to stylistic preference.

export default connect(
  state => state.modal
)(ModalRoot)

is equivalent to something like

function mapStateToProps(state) {
  return state.modal;
}

var ConnectedModalRoot = connect(
  mapStateToProps
)(ModalRoot)

export default ConnectedModalRoot;

export default <expression> and var Something = <expression>; export default Something is equivalent.

I hope this helps!

[TheBeardedLlama]

Please accept my apologies @Aweary

I was so caught up in the code that I forgot they're separate repos... :$

[aweary]

No apologies needed! It's an easy mistake to make 😄 hope it helped!

[TheBeardedLlama]

I didn't mean to seem ungrateful... thank you for the response @gaearon, it was indeed helpful

and of course thank you for creating the thing in the first place!