javascript - Should generic React List component receive props or listeners from parent? -

this more style/theory question think both methods work. here scenario:

i have infinitelist component want keep generic. gets current list of item ids parent, figures out ones has render. that, pull appropriate ids list, go fetch full data id store.

my question this: keep generic, infinite list component can't hardcode store should getting full item data (say have 10 different types of items have own store). however, makes more sense me scrolling around , changing set of items being displayed state thing. so, think makes sense to:

a) pass list of ids props, add/remove listeners in parent component, list component knows listen to?

b) or make more sense pass in both list , full set of item data available in props , have parent component listen appropriate store?

part of motivation behind "listening" if store doesn't have items, must fetch them, need list rerender once itemstore updates.

inspired partly here: reactjs: modeling bi-directional infinite scrolling

i go b following reasons:

1) think result in generic component, because doesn't need know data coming or how updated.

2) component has no state.

3) code listen store events , update component's state short won't enjoy significant benefit moving component.

the advantage i'd see having moving store event handling component, don't have rewrite it. doing this, you'd force component have state. maybe in case, it's straightforward enough not matter. depends on application. if components higher in hierarchy (parents of infinitelist) going re-render on events same store, i'd shy away having infinitelist re-render on same event. if you're infinitelist is component need update on event, make sense have state in infinitelist, seems unlikely hold in cases. again, i'd lean toward b more generic.

that being said, if wanted save rewriting event handling logic, , if you're using same approach react tutorials, leverage fact , pass store prop. in examples, stores created inheriting eventemitter.prototype. if create each of stores way, know have addlistener() , removelistener(), method. additionally, require each store have methods getitemids() , `getitem( id )'. if wanted explicitly enforce object passed react component has these methods, use proptypes isrequired. example:

//yourcomponent.js  var yourcomponent = react.createclass({   proptypes:{     // assuming listmodel has been defined methods need     listmodel: react.proptypes.instanceof( listmodel ).isrequired,     // assuming you're using eventemitter, in react example code     modelevent: react.proptypes.string.isrequired   },    getinitialstate: function(){     // start empty array     return { items: [] };   },    componentdidmount: function(){     var evt_handler;      // when model changes, list again     evt_handler = ( function(){        this.setstate( { items: this.props.listmodel.getitemids() } );     }.bind( ) ); // bind maintain context      // register events     this.props.listmodel.addlistener( this.props.modelevent, evt_handler );    },    render: function(){     ...do filtering, make pretty   } }); 

this less generic stateless approach of b , stylistic alternative passing functions themselves, either way, i'd use proptypes isrequired functions.