Skip to content

condition

import { condition } from 'patronum';
// or
import { condition } from 'patronum/condition';

Motivation

Condition is very similar to sample, but allows you to have else branch along with simple if matcher.

condition({ source: Unit, if: Store, then?: Unit, else?: Unit })

Formulae

result = condition({
source,
if: $checker,
then,
else,
});
  • When source is triggered, check value of $checker, if it equals true, trigger then with value from source, otherwise trigger else with value from source
  • result is the same unit as source allows to nest condition to another condition or sample

Arguments

  1. source (Unit<T>) — Data from this unit will be passed to then or else
  2. if (Store<boolean>) — Updates of this store will not trigger then and else
  3. then (Unit<T>) — This unit will be triggered with data from source if $checker contains true. Required if else is not provided
  4. else (Unit<T>) — This unit will be triggered with data from source if $checker contains false. Required if then is not provided

Returns

  1. (Unit<T>) — The same unit type that passed to source

Example

const change = createEvent();
const $source = createStore('data').on(change, (_, payload) => payload);
const toggle = createEvent();
const $isEnabled = createStore(false).on(toggle, (is) => !is);
const enabled = createEvent();
const disabled = createEvent();
condition({
source: $source,
if: $isEnabled,
then: enabled,
else: disabled,
});
enabled.watch((payload) => console.log('enabled -', payload));
disabled.watch((payload) => console.log('disabled -', payload));
change('newdata');
// => disabled - newdata
toggle();
change('data');
// => enabled - data

condition({ source: Unit<T>, if: T, then?: Unit, else?: Unit })

Formulae

result = condition({
source,
if: value,
then,
else,
});
  • When source is triggered, compare value literal with source payload, if it equals trigger then with value from source, otherwise trigger else with value from source
  • result is the same unit as source allows to nest condition to another condition or sample

Arguments

  1. source (Unit<T>) — Data from this unit will be passed to then or else
  2. if (T) — Just value to compare with source payload. Note: objects will be compared by reference
  3. then (Unit<T>) — This unit will be triggered with data from source if $checker contains true. Required if else is not provided
  4. else (Unit<T>) — This unit will be triggered with data from source if $checker contains false. Required if then is not provided

Returns

  1. (Unit<T>) — The same unit type that passed to source

Example

const increment = createEvent();
const $source = createStore(0).on(increment, (state) => state + 1);
const log = createEvent();
const run = createEffect().use((data) => {
console.info('FAKE RUN EFFECT', data);
});
condition({
source: $source,
if: 4,
then: run,
else: log,
});
log.watch((payload) => console.log('LOG ABOUT IT', payload));
increment(); // => LOG ABOUT IT 1
increment(); // => LOG ABOUT IT 2
increment(); // => LOG ABOUT IT 3
increment(); // => FAKE RUN EFFECT 4
increment(); // => LOG ABOUT IT 5

condition({ source: Unit<T>, if: Function, then?: Unit, else?: Unit })

Formulae

result = condition({
source,
if: (payload) => boolean,
then,
else,
});
  • When source is triggered, call if with source payload, if it returns true trigger then with value from source, otherwise trigger else with value from source
  • result is the same unit as source allows to nest condition to another condition or sample

Arguments

  1. source (Unit<T>) — Data from this unit will be passed to then or else
  2. if ((payload: T) => boolean) — Function comparator. It should return boolean
  3. then (Unit<T>) — This unit will be triggered with data from source if $checker contains true. Required if else is not provided
  4. else (Unit<T>) — This unit will be triggered with data from source if $checker contains false. Required if then is not provided

Returns

  1. (Unit<T>) — The same unit type that passed to source

Example

const change = createEvent();
const $source = createStore('data').on(change, (_, payload) => payload);
const target = createEvent();
const another = createEvent();
condition({
source: $source,
if: (source) => source.length > 3,
then: target,
else: another,
});
target.watch((payload) => console.log('triggered', payload));
another.watch((payload) => console.log('condition else:', payload));
change('newdata');
// => triggered newdata
change('old');
// => condition else: old

Examples

Source is event

const inputChanged = createEvent();
const $value = createStore('');
const $error = createStore(false);
const setError = createEvent();
const setValue = createEvent();
$value.on(setValue, (_, value) => value);
$error.on(setError, () => true).on(setValue, () => false);
condition({
source: inputChanged,
if: isValid,
then: setValue,
else: setError,
});
function isValid(value) {
return value.trim().length > 0;
}

Condition can be nested

const $value = createStore('hello@world');
const updateEmail = createEvent<string>();
condition({
source: $value,
if: (length) => length > 0,
then: condition({
if: (string) => string.includes('@'),
then: updateEmail,
}),
});