MIGRATED! This was transfered to https://cycle.js.org/api/state.html
Reducers used to be applied synchronously, now they are applied at the end of the current event loop using the microtask scheduler. See issue #61 for more context.
Also fixed pickMerge to ignore undefined sink streams, and fixed pickCombine to refuse (by throwing an error) undefined sink streams. See issues #58 and #64.
Version 4 introduces "Collections", a way of efficiently and simply handling lists of many components.
makeCollection
allows you to pass some configuration parameters, and returns a normal sources=>sinks Cycle.js component:
const List = makeCollection({
item: Child,
itemKey: (childState, index) => String(index),
itemScope: key => key,
collectSinks: instances => {
return {
onion: instances.pickMerge('onion'),
DOM: instances.pickCombine('DOM')
.map(itemVNodes => ul(itemVNodes))
}
}
});
item
required parameter: specify the item component for the list of itemsitemKey
optional parameter: given state and (array) index, specify the unique identifier (key) for each item. Defaults to array index.itemScope
optional parameter: given the item key, determine the isolation scope for that item. Defaults to null
.collectSinks
required parameter: a function specifying how to collect together all the sinks from all item components. Takes instances
as input, where instances
has two functions pickMerge
and pickCombine
, which work like pick
+mix(merge)
and pick
+mix(combine)
, respectively.Once List
component is created, you can use it:
const listSinks = isolate(List, 'list')(sources);
This means sources.onion.state$
should be a stream that emits state objects with the shape {..., list: [...]}
, in other words, there should be a list
property that is an array. The use of isolate
is optional, as long as List
receives a stream of arrays under the onion
channel. This is how the List knows how to create item components as the array dynamically grows or shrinks.
Note that in this version, pick
and mix
were removed. Instead, we have pickMerge
and pickCombine
.
Both xstream v7.0 and v6.0 are supported now. This specially affects TypeScript users who may depend on the typings. The typings for xstream v6.0 are not compatible with xstream v7.0, even though they look the same.
onionify now does object reference checks to prevent the (exactly) same object reference to be emitted consecutively. Internally, this uses dropRepeats.
BREAKING CHANGE: Just in case you were relying on buggy behavior, this library will no longer emit redundant/duplicate references of state. Overall this improves reliability, but also performance, to some extent. For most users, this should be super safe to upgrade.