rpominov / fluce

[DEPRECATED] Flux with immutable data and pure action handlers
MIT License
75 stars 1 forks source link

Make sure <Fluce/> can be used as a "Smart" component for a "Dumb" child #8

Open rpominov opened 9 years ago

rpominov commented 9 years ago

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

rpominov commented 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} />} 
/>
rpominov commented 9 years ago

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.