jscommunity / reaclette Goto Github PK
View Code? Open in Web Editor NEWInspired by Freactal, but better :wink:
Inspired by Freactal, but better :wink:
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?
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 })
}
Only state entries returned by initialState
can be changed by effects.
const Clock = provideState({
computed: {
// it simply returns an async iterator instead of a value
//
// the computed is undefined before the first
// value is emitted by the iterator
//
// each new emitted value will trigger a new render with the
// computed set to this value
//
// rejections are not handled and will possibly trigger an
// unhandledRejection event on the window object, the computed will
// keep its previous value
//
// this computed, which does not have dependencies, yields a new
// date value every second
async *date() {
while (true) {
yield new Date()
await new Promise(resolve => setTimeout(resolve, 1e3))
}
}
}
})(injectState(({ state }) => <p>{state.date.toISOString()}</p>))
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.
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:
Non-breaking changes:
Small breaking changes:
effects
as injected arg in effectsthis.state
Big breaking changes:
Existing APIs to check out:
Via prop-types
.
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:
provideState(injectState(Component))
I think we should consider departing completely from the implicit inheritance API and favor a local (with explicit inheritance) API.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.