Open rpominov opened 9 years ago
Here what I'am thinking of (shamelessly borrowing from https://github.com/gaearon/redux):
function addFoo(fluce, foo) {
fluce.dispatch('fooAdd', foo)
}
function deleteBar(fluce, bar) {
fluce.dispatch('barDelete', bar)
}
class DumbComp extends React.Component {
render() {
return <div>
<h3>Foos</h3>
<ul>
{this.props.foo.map(foo => <li>{foo}</li>)}
</ul>
<button onClick={() => this.props.addFoo('a new Foo')}>Add Foo</button>
{/* ... similar stuff for Bar */}
</div>
}
}
// Default render
<Fluce stores={{foo: 'fooStore', bar: 'barStore'}} actionCreators={{addFoo, deleteBar}}>
<DumbComp />
</Fluce>
// Custom render
<Fluce
stores={{foo: 'fooStore', bar: 'barStore'}}
actionCreators={{addFoo, deleteBar}}
render={(stores, actionCreators) => <DumbComp {...stores} {...actionCreators} />}
/>
I've updated the readme on the matter.
Also removed section about higher order component, I think we can live without it for a while. The <Fluce/>
component seems enough, and the smaller API is the better.
See https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
Currently, in order to fire actions, child needs to "touch" (and know about)
fluce
instance object. We should somehow provide action creators as callbacks to the child component.Also we probably need a smarter logic of passing stores' states, rather than simply pass a
stores
prop (which might be a good default, though).