javascript - Purely following Redux way and having Dump | Presentational components -


when create react components, follow philosophy of having dump/presentational react components connected containers? having dump components fulfils 1 of main principles of redux (single source of truth) complicated things when comes component isolation. mean that:

... end have table component can present data , have ability select rows, selection don't work unless connected store via container. in theory because lot of other components rely on selection having going through store keeps everything in sync. however, means table component cannot interactable (selection won't work if not connected store). make automated ui tests harder test each component need have related container in order work properly.

another example; have dialog box, have show state within component or have connected store through container?

any thoughts?

i presentational , container components approach. make code clearer, cleaner , way more reusable.

the idea behind presentational component must not perform action on data, purely ui. , data must come container (from redux store, or helper class etc.)

the best practice pass down presentational components functions container components via props.

// container component  handlechange(e) {   this.setstate({ username : e }) }  render() {   return (     <boarding       placeholder={this.state.placeholder}       error={this.state.error}        onchangetext={this.handlechange}       name={this.props.fb_user.user_firstname}       profilpicture={this.props.fb_user.user_picture} />   ) }  export default connect((state) => ({   fb_user: state.statuslogin, }), {})(boardingcontainer) 

here simple example on how can pass function down presentational component (which textinput here) , connect data inputed in textinput.

also, if watch closely you'll see pass this.props.fb_user.user_firstname && this.props.fb_user.user_picture comes redux store connected using last lines of code example.

here famous medium article more details : https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.smfbi5hjj

hope helps, if have more questions, ask me.


Comments