Improve inheritance model

[julien-f]

Issue with current API:

• implicit state/effects dependencies
• a component placed between two components sharing state/effects will shadow them
• cumbersome local use: provideState(injectState(Component))

I think we should consider departing completely from the implicit inheritance API and favor a local (with explicit inheritance) API.

[julien-f]

Maybe we should remove the ability to decorate any component, simply accept a render function:

const Parent = withStore(
  {
    initialState: () => ({ value: '' }),
    effects: {
      onChange: event => ({ value: event.target.value }),
    }
  },
  (store, props) => (
    <input onChange={store.effects.onChange} value={store.state.value} />
  )
)

const Child = Parent.injectStore(
  (parentStore, props) => (
    <div>{parentStore.state.value}</div>
  )
)

And provide a nice syntax to use multiple stores:

import App from '../../'
import Form from '../'

const MyComponent = App.injectStore(
  Form.injectStore(
    (formStore, appStore, props) => (
      <div />
    )
  )
)

[julien-f]

Maybe Reaclette should not provide inheritance and let users use React features like useContext().