@abradley2/cycle-effects 中文文档教程
Cycle Effects
npm install --save @abradley2/cycle-effects
Purpose
使用 Cycle 时，尤其是在服务器上，经常需要大量复杂的 处理大量副作用的驱动程序。
该库假定您使用的是 xstream 和默认的 @cycle/run。 如果你 有兴趣在没有 Cycle 的另一个 Reactive Programming 库的情况下使用它 支持，请打开一个问题
API
与大多数其他 Cycle 驱动程序一样，API 表面区域只是一个源和一个接收器。
这些类型是对预期内容的良好指导。 请参阅示例用法部分 全面、深入的指南。
declare module '@abradley2/cycle-effects' {
export type EffectSource<A> = (tag: string | symbol) => xstream<{
value: A;
error: Error;
}>
export type EffectSink<A> = xstream<{
run: (args: any) => Promise<A>;
args: any;
tag: string | symbol;
}>
}
But isn't this running effects where we should be pure??
实际上，不。 类似于 Redux Loop 我们是 只返回一个副作用导致函数被运行时执行。 这就是为什么 我们必须为效果配置提供一个 args 属性，以便传递任何内容 一个产生副作用的函数。
Example Usage
下面的应用程序会先运行一个效果来得到一个随机的 数字，然后运行一个设置超时时间的效果 基于那个随机数。 最后，那个效果产生了名字 通过结果接收器发送“Tony”。
const xs = require('xstream').default
const createEffectsDriver = require('@abradley2/cycle-effects')
function application({effects}) {
const randomEffect = Symbol('randomEffect')
const timeoutEffect = Symbol('timeoutEffect')
return {
effects: xs.merge(
xs.of(
{
run: () => new Promise(resolve => resolve(Math.random())),
tag: randomEffect
}
),
effects.select(randomEffect)
.map(randomNum => {
return {
run: (name, timeoutDuration) => new Promise(resolve =>
setTimeout(() => resolve(name), timeoutDuration)
),
tag: timeoutEffect,
args: ['Tony', randomNum * 1000]
}
})
),
result: effects.select(timeoutEffect)
.filter(result => !result.error)
.map(result => result.value)
}
}
const {sinks, run} = setup(application, { effects: createEffectsDriver() })
sinks.result
.take(1)
.subscribe({
next: function (value) {
console.log(value) // "Tony"
}
})
Cycle Effects
npm install --save @abradley2/cycle-effects
Purpose
When using Cycle, especially on the server, there's often need for a large amount of complex drivers dealing with a large amount of side effects.
This library assumes you are using xstream and the default @cycle/run. If you are interested in using this without another Reactive Programming library that Cycle supports, please open an issue
API
As with most other Cycle drivers, the API surface area is just a source and a sink.
The types are a good guidance on what is expected. See the Example Usage section for a full, in-depth guide.
declare module '@abradley2/cycle-effects' {
export type EffectSource<A> = (tag: string | symbol) => xstream<{
value: A;
error: Error;
}>
export type EffectSink<A> = xstream<{
run: (args: any) => Promise<A>;
args: any;
tag: string | symbol;
}>
}
But isn't this running effects where we should be pure??
Actually, no. Similar to Redux Loop we are only returning a side-effect causing function to be executed by the runtime. This is why we must supply an args property to the effect configuration in order to pass anything to a function that creates side effects.
Example Usage
The following application will first run an effect to get a random number, and then run an effect that sets a timeout with a duration based on that random number. Finally, that effects results in the name "Tony" being sent through the result sink.
const xs = require('xstream').default
const createEffectsDriver = require('@abradley2/cycle-effects')
function application({effects}) {
const randomEffect = Symbol('randomEffect')
const timeoutEffect = Symbol('timeoutEffect')
return {
effects: xs.merge(
xs.of(
{
run: () => new Promise(resolve => resolve(Math.random())),
tag: randomEffect
}
),
effects.select(randomEffect)
.map(randomNum => {
return {
run: (name, timeoutDuration) => new Promise(resolve =>
setTimeout(() => resolve(name), timeoutDuration)
),
tag: timeoutEffect,
args: ['Tony', randomNum * 1000]
}
})
),
result: effects.select(timeoutEffect)
.filter(result => !result.error)
.map(result => result.value)
}
}
const {sinks, run} = setup(application, { effects: createEffectsDriver() })
sinks.result
.take(1)
.subscribe({
next: function (value) {
console.log(value) // "Tony"
}
})
