spread
import { spread } from 'patronum';
// or
import { spread } from 'patronum/spread';
spread({ source, targets })
Motivation
This method allows to trigger many target at once, if they match the source structure. It is useful when you need to destructure object and save values to different stores.
Formulae
spread({ source, targets: { field: target, ... } })
- When
source
is triggered with object, extractfield
from data, and triggertarget
targets
can have multiple properties- If the
source
was triggered with non-object, nothing would be happening - If
source
is triggered with object but without propertpyfield
, target for thisfield
will not be triggered
Arguments
source
(Event<T>
|Store<T>
|Effect<T>)
— Source unit, data passed to it should be an object with fields fromtargets
targets
(Record<string, Event<T> | Store<T> | Effect<T>>)
— Flat object which key is key insource
payload, and value is unit to store value to.
Example
Save fields of payload to different stores
import { createStore, createEvent } from 'effector';
import { spread } from 'patronum/spread';
const $first = createStore('');
const $last = createStore('');
const formReceived = createEvent();
spread({
source: formReceived,
targets: {
first: $first,
last: $last,
},
});
$first.watch((first) => console.log('First name', first));
$last.watch((last) => console.log('Last name', last));
formReceived({ first: 'Sergey', last: 'Sova' });
// => First name Sergey
// => Last name Sova
formReceived({ first: 'Patronum' });
// => First name Patronum
Call events on store changes
import { createStore, createEvent } from 'effector';
import { spread } from 'patronum/spread';
const save = createEvent();
const $form = createStore(null).on(save, (_, form) => form);
const firstNameChanged = createEvent();
const lastNameChanged = createEvent();
spread({
source: $form,
targets: {
first: firstNameChanged,
last: lastNameChanged,
},
});
firstNameChanged.watch((first) => console.log('First name', first));
lastNameChanged.watch((last) => console.log('Last name', last));
save({ first: 'Sergey', last: 'Sova' });
// => First name Sergey
// => Last name Sova
save(null);
// Nothing, because store is null
source = spread({ targets })
Motivation
This overload creates event source
that should be triggered and returns it.
It is useful to pass source
immediately to another method as argument.
Formulae
source = spread({ targets: { field: target, ... } })
- When
source
is triggered with object, extractfield
from data, and triggertarget
targets
can have multiple properties- If the
source
was triggered with non-object, nothing would be happening - If
source
is triggered with object but without propertpyfield
, target for thisfield
will not be triggered
Arguments
targets
(Record<string, Event<T> | Store<T> | Effect<T>>)
— Flat object which key is key insource
payload, and value is unit to store value to.
Returns
source
(Event<T>
|Store<T>
|Effect<T>)
— Source unit, data passed to it should be an object with fields fromtargets
Example
Conditionally save value to stores
import { createStore, createEvent, guard } from 'effector';
import { spread } from 'patronum/spread';
const $first = createStore('');
const $last = createStore('');
const formReceived = createEvent();
guard({
source: formReceived,
filter: (form) => form.first.length > 0 && form.last.length > 0,
target: spread({
targets: {
first: $first,
last: $last,
},
}),
});
$first.watch((first) => console.log('First name', first));
$last.watch((last) => console.log('Last name', last));
formReceived({ first: '', last: '' });
// Nothing, because filter returned true
formReceived({ first: 'Hello', last: 'World' });
// => First name Hello
// => Last name World
Nested spreading
const trigger = createEvent();
const $targetA = createStore('');
const $targetB = createStore(0);
const $targetC = createStore(false);
spread({
source: trigger,
targets: {
first: $targetA,
second: spread({
targets: {
foo: $targetB,
bar: $targetC,
},
}),
},
});
$targetA.watch((payload) => console.log('targetA', payload));
$targetB.watch((payload) => console.log('targetB', payload));
$targetC.watch((payload) => console.log('targetC', payload));
trigger({
first: 'Hello',
second: {
foo: 200,
bar: true,
},
});
// => targetA Hello
// => targetB 200
// => targetC true