Skip to content

Instantly share code, notes, and snippets.

@artalar
Last active July 21, 2018 20:40
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • 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
@artalar
Copy link
Author

artalar commented Jul 19, 2018

Мне не нравится концепция евентов тем что есть проблема с остановкой их распространения: если такая возможность есть, то код выходит местами не явный (ты ожидаешь евент, а он до тебя не доходит), если такой возможности нет, то приходится костылить зависимости между подписчиками евента.

В моей концепции переходы определены и ты точно знаешь что реагируешь на какое-то другое состояние. Как приложение придет в это состояние - не вопрос модуля совсем

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment