Skip to content

Instantly share code, notes, and snippets.

@artalar
Last active July 21, 2018 20:40
Show Gist options
  • Save artalar/8b487839fa5f4662d1cdfb21bb54be7c to your computer and use it in GitHub Desktop.
Save artalar/8b487839fa5f4662d1cdfb21bb54be7c to your computer and use it in GitHub Desktop.
[RFC] global stream with declarative suscriptions
/* Example #1 */
// Store.js
// `Atom()` - create new stream
const a = Atom(0);
const b = Atom(0);
export const store = createStore({ a, b })
// `store.state.a` === `a` (stream)
// Component.js
// `match()` - create new pattern
// for subscribe and matching updates from store
// when all matches is pass updated data
// from every element of pattern
// will paste in the subscription callback
// For example, we need to subscribes to `a`
// only when it equal `1`
var subscriptionStatic = match(
[store.state.a], /* pattern */
[1], /* match */
);
// or, we need all `b`
// only when `a` equal `1`
var subscriptionStatic = match(
[store.state.a, store.state.b],
[1],
);
// or, we just need `b`
var subscriptionStatic = match(
[store.state.b],
);
// dynamic initialization subscription
const subscriptionDynamicFromInitialization = match(props => [
[store.state.a],
[props.a],
]);
// dynamic subscription
const subscriptionDynamic = match(initialProps => props => [
[store.state.a],
[props.a],
]);
// Component will receive new props
// only if updated state will match EVERY pattern in ANY subscription
export const ComponentConnected = connect({
value1: subscriptionStatic,
value2: subscriptionDynamicFromInitialization,
value3: subscriptionDynamic,
})(Component);
/* Example #2 */
// Component.js
//...
<form name={someWorkflowId} onSubmite={onEvent}>{/* */}</form>
//...
// workflow-some.js
const fetchData = () => fetch();
connect(
match(
// `state.event` receive (from view) and contain last DOM event
[store.state.event],
[{ type: 'submit', target: { name: someWorkflowId } }],
),
)(fetchData);
// workflow.js
export const onEvent = event => store.state.event.set(event);

TODO: explanation

  1. Declarative. (https://en.wikipedia.org/wiki/Language-oriented_programming) (https://en.wikipedia.org/wiki/No_Silver_Bullet)
  2. Store - global stream - single source of trust for any application slice (in time). It means posibility to access of any state (about fsm).
  3. Auto generating dependency graph for better subscriptions performans (runtime) and analitics charts (offline).
  4. Predictable reactive programming.
  5. Unification subscription to events and store change by grouped subscriptions queue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment