1

I'm trying to understand why the function "connect" is called with two inputs in the last line of the following snippet that uses React and Redux:


import {connect} from 'react-redux'; 

class SharedGraphScreen extends Component {...}

const mapStateToProps = (store) => ({
  user: store.userState.user,
  theme: store.userState.theme,
  relations: store.core.relations,
  knowClosure: store.core.knowClosure,
});

export default connect(mapStateToProps)(SharedGraphScreen);

Here's the part I'm not understanding what the code is supposed to do:

connect(mapStateToProps)(SharedGraphScreen)

I'm guessing that connect(mapStateToProps) returns a function that is called with SharedGraphScreen as its parameter, but I'm not sure about this. Is that correct ?

If that's the case, how can I know the name of the returned function ? I have searched for it on the redux documentation, but couldn't figure out which of all the functions described in the documentation was the one used in the code I'm presenting (https://react-redux.js.org/api/connect). I understand that the final result of the code is the connection of the component 'SharedGraphScreen ' to the redux store, but I would like to know more details about the inner returned function.

joaoricardotg
  • 137
  • 3
  • 9
  • 1
    Read it as `(connect(mapStateToProps))(SharedGraphScreen)`, and pay close attention to what `connect(...)` [will return](https://react-redux.js.org/api/connect#returns), as well as what type of thing your `mapStateToProps` is. – Mike 'Pomax' Kamermans Jun 11 '21 at 22:30

0 Answers0