CODEWITHSUNDEEP
javascriptreactjsreact-redux
Joey Yi Zhao
Joey Yi Zhao

Reputation: 42634

Try to understand this javascript source code

I am reading a react code as below:

const AppWithNavigationState = connect(state => ({
   nav: state.nav,
 }))(({dispatch, nav}) => (
   <Root navigation={addNavigationHelpers({ dispatch, state: nav })}/>
 ));

I don't quite understand the above code. Especially this line <Root navigation={addNavigationHelpers({ dispatch, state: nav })}/>.

Is above code equal to below code?

class AppWithNavigation extends Component{

  render(){
    return (<Root navigation={this.props.addNavigationHelpers.bind(this)}/>);
  }

}
const mapStateToProps = (state) => {
  return {
    nav: state.nav,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    addNavigationHelpers: (nav)=>{
      dispatch(addNavigationHelpers(nav))
    }

  }
}

const AppWithNavigationState = connect(mapStateToProps, mapDispatchToProps)(AppWithNavigation);

Upvotes: 1

Views: 203

Answers (2)

Jakob Lind
Jakob Lind

Reputation: 1440

<Root navigation={addNavigationHelpers({ dispatch, state: nav })}/>

This is JSX code. It is a component called Root that takes one prop navigation. The value of the navigation is the returned value of a function call to addNavigationHelpers. The addNavigationHelpers function call has an object as argument: { dispatch, state: nav }. This object can also be written like this:

{ dispatch: dispatch, state: nav }

Which might be more readable.

You also ask if the code below is equal to the one above. It is not. I will focus on comparing the two Root components:

<Root navigation={this.props.addNavigationHelpers.bind(this)}/>

This component takes the addNavigationHelpers function as prop to the component. It will not call the addNavigationHelpers function and send the returned value, but it will send the function itself.

Upvotes: 1

j6s
j6s

Reputation: 81

What you are looking at is most likely not JavaScript code, but rather reacts JSX. You can find more information about JSX In the React Documentation.

In this case Root seems to be another React component, to which the callback mapNavigationHelpers is passed / bound as navigation.

See: - https://facebook.github.io/react/docs/introducing-jsx.html - https://facebook.github.io/react/docs/jsx-in-depth.html

Upvotes: 1

Related Questions