jscommunity / reaclette Goto Github PK

const CitySelector = provideState({
  computed: {
    // it simply returns a promise instead of a value
    //
    // state.cities in the render before the promise settles
    //
    // if the promises rejects, a warning is displayed in
    // the console and the value will stay undefined
    cities: ({ country }) => loadCities(country)
  }
})(
  injectState(({ onChange, state, effects, value }) => (
    <select onChange={onChange} value={value}>
      {state.cities !== undefined
        ? state.cites.map(city => <option>{city}</option>)
        : null}
    </select>
  ))
)

Questions?

• behavior if the factory is called again before the previous promise settle
• behavior if the component is unmounted before the promise settle
• should it possible to provide a default value instead of undefined?

Solution:
Emit a task.info event at job execution which contains all VMs IDs and filter them by successful VMs on restarting failed Vms.

Common error:

effects: {
  foo: () => state => ({ foo: true }), // instead of ({ ...state, foo: true })
}

It could be interesting to have settable computed:

const withState = provideState({
  initialState: () => ({ kelvin: 42 }),
  computeds: {
    celsius: {
      get: state => state.kelvin - 273.15,
      set (value) {
        state.kelvin = value + 273.15
      },
    },
  },
})

Other libs providing this feature:

• Vue.js
• Recoil

Only state entries returned by initialState can be changed by effects.

Throwing a message like this circular computed dependencies detected would help understanding and fixing the problem.

Useful with forms.

The problem comes from the fact that componentDidMount is executed first in children then in parents.

Main issue: the child state can use the parent state before it's initialized.

Derived issue: the parent state can be updated (due to a child) before the parent injectState has subscribed to it, therefore the parent component will not be re-rendered.

Possible solution: if the child state has a parent, defer the call to initialize after the one of the parent.

• react-redux had the same problem

It was initial API compatible with Freactal but it's starting to take a shape on it's own, a new name should reflect that 🙂

Propositions welcome!

Here's an example of what it looks like:
https://github.com/HamadaBrest/freactal-bug-prototype

This avoid testing and special cases for users (render, other computed or effects):

export default withState({
  computeds: {
    items: {
      get: () => fetch('/items').then(res => res.json()),
      placeholder: [],
    },
  },
}, ({ state }) => (
  <ul>
    {state.items.map(item => <li>{item}</li>)}
  </ul>
))

Without a placeholder, state.items would have been undefined before the items were fetched, it would have required special handling in the render to avoid an exception.

If a computed throws, it should be considered as unchanged, thus:

• don't trigger a render
• still expose the previous value in subsequent render

Non-breaking changes:

• provide a way to reset the state (#2)
• default effects (#5)

Small breaking changes:

• remove effects as injected arg in effects
• remove reducer API (ability to return new state) in favor of this.state

Big breaking changes:

• explicit inheritance (#12)

Existing APIs to check out:

• vuejs/rfcs#17

Via prop-types.

• external props
• inherited state
• inherited effects

const ExchangeBillboard = provideState({
  dynamic: {
    rate: props => /* returns an promise/async iterator/observable */,
  },
})(
  injectState(({ state }) =>
    <p>EUR/USD {state.rate}</p>
  )
)

Question: How can it be combined with computeds?

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.