Try to understand this javascript source code

Question

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);

Jakob Lind · Accepted Answer · 2017-02-28 09:08:47Z

1

<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.

answered Feb 28, 2017 at 9:08

Jakob Lind

1,4401 gold badge10 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joey Yi Zhao Over a year ago

if i used the short version, can I add move methods on AppWithNavigationState class?

j6s · Accepted Answer · 2017-02-28 08:50:01Z

1

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

answered Feb 28, 2017 at 8:50

j6s

813 bronze badges

Collectives™ on Stack Overflow

Try to understand this javascript source code

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related