StateStream

构造函数：

constructor(streamName: string, initialValue?: any, stateStreams?: Array<StateStream>)

实例变量：

state$
streamName
Observable
emitters

实例方法：

emitter
getState
next
eventRunner
dispose

StateStream 是 Rxact 中的核心概念，利用 StateStream 可以封装你的数据与业务逻辑。在使用 Rxact 之前，你可以先构想你的应用逻辑流，然后在通过定义 StateStream 将他们表现出来。

例子

1.创建一个 StateStream

const stateStream = new StateStream('example', {})

上面的例子简单地创建了一个名为 example, 初始值为 {} 的 state 流。

2.创建多个 StateStream，并联合使用

const userStream = new StateStream('users', [{ id: 1, name: 'darmody' }, { id: 2, name: 'john' }]) 
const postStream = new StateStream('posts', [{ id: 1, title: 'API Overview' }, { id: 2, title: 'README' }]
const appStream = new StateStream('app', { currentUserId: 1, currentPostId: 1 }, [userStream, postStream])

appStream.state$.subscribe(state => console.log(state))
// {
//   app: { currentUserId: 1, currentPostId: 1 },
//   users: [{ id: 1, name: 'darmody' }, { id: 2, name: 'john' }],
//   posts: [{ id: 1, title: 'API Overview' }, { id: 2, title: 'README' }]
// }

通过上面的例子可以看到 StateStream 之间还可以互相组合形成新的逻辑，这样就可以实现复杂的逻辑组合了。

state$

state$ 是一个 observable 对象，用于观察 state 的变化。你可以用你所配置的库对 state$ 做可用的操作，并监听它。

例子

const stream = new StateStream('example', 0)

const subscription1 = stream.state$.subscribe(state => console.log('sub1', state))
// subscribe 会立即输出当前值，这里为初始值 0

stream.next(() => 1)
// 这里将 state 更新为 1

const subscription2 = stream.state$.subscribe(state => console.log('sub2', state))
// 立即输出当前值，这里为 1

// 输出结果:
// sub1 0
// sub1 1
// sub2 2

注意 next 本身是异步操作，这里为了解释例子使得 next 看起来像顺序操作。

streamName

streamName 即为 stream 的名字。

例子

const stream = new StateStream('example')

console.log(stream.streamName)
// example

Observable

Observable 为你所配置的 Observable class。

例子

// 假设已经配置了 Rx.Observable
const stream = new StateStream('example')

console.log((instanceof stream.Observable) === Rx.Observable)
// true

emitters

emitters 是一个 Object，每个 key 都对应通过 emitter 方法定义的一个 state 更新操作。通常情况下不需要直接访问 emitters。

例子

const stream = new StateStream('example')

// 关于 emitter 方法请查看下面的介绍
stream.emitter('emitterA', () => state => state)

// 现在你可以直接访问到 emitterA 或者通过 emitters 访问
console.log(stream.emitterA === stream.emitters.emitterA)
// true

next: (updater: Function) => void

next 用于更新 StateStream 中的 state，并接受一个参数：

updater: 定义如何更新 state 的函数，参数为当前的 state，返回值为更新后的 state。

例子

const stream = new StateStream('example', 0)

stream.subscribe(state => console.log(state))

stream.next(prevState => prevState + 2)
stream.next(() => 10)
stream.next(prevState => prevState - 3)

// subscribe 输出：
// 0
// 2
// 10
// 7

emitter

emitter: (name: string, highOrderUpdater: Function) => void

emitter 用于定义一个 state 更新操作，并接受两个参数：

name：操作名称
highOrderUpdater: 定义函数签名及 state 更新方法

例子

const stream = new StateStream('example', 0)

stream.emitter('emitterA', value => prevState => (prevState + value))
// 上面的定义相当于
// stream.emitterA = value => stream.next(prevState => (prevState + value))
// stream.emitters.emitterA = stream.emitterA

stream.state$.subscribe(state => console.log(state))

// 现在你可以直接在实例上调用你定义的 emitter
stream.emitterA(1)
stream.emitterA(2)

// subscribe 输出
// 0
// 1
// 3

通过 emitter 定义 state 更新的好处在于语义上帮助你划分不同功能的操作，并且在与 rxact-debugger 等第三方插件配合使用时会更高效。

getState

getState: () => currentState: any

getState 用于获取当前的 state。

例子

const stream = new StateStream('example', 0)

stream.subscribe(state => {
  console.log(stream.getState(), state)
})

stream.next(() => 1)
stream.next(() => 2)

// subscribe 输出
// 0, 0
// 1, 1
// 2, 2

eventRunner

eventRunner: (streamFactory: Function, source?: any) => Observable

eventRunner 用于执行事件流，并接受两个参数：

streamFactory: 接受传入的 source 作为参数，并返回你处理好的 observable 对象
source: 输入源，可以为任意值，如果为非 observable 对象则会自动通过 Observable.of 转换，如果为空值，则会用 stream 的 state 转换为 observable 对象作为输入源。
return: 最后返回一个 subscribe 事件流的 observable 对象。

streamFacoty 返回的 observable 对象会被立即 subscribe，这样就不需要手动去 subscribe。并且 eventRunnter 还会返回一个 observable 对象便于在事件完成的后续操作。

例子

const stream = new StateStream('example', 5)

const factory = value$ => value$
  .delay(1000)
  .do((value) => stream.next((prevState) => value + prevState))

// 没有传入 source，所以用 state 作为输入源
stream.plusStateAsync = () => eventRunner(factory)

// 传入一个值作为输入源
stream.plusValueAsync = value => eventRunner(factory, value)

// 传入一个 observable 值作为输入源
stream.plusObservableAsync = value => eventRunner(factory, Observable.of(value))

stream.subscribe(state => console.log(state))

stream.plusStateAsync()
stream.plugsValueAsync(1)
stream.plusObservableAsync(2)

// subscribe 输出：
// 5      - 初始值
// 10     - plusStateAsync()
// 11     - plusValueAsync(1)
// 13     - plusObservableAsync(13)

stream.plusOne = () => stream.next(state => (state + 1))

const plusStateAsync$ = stream.plusStateAsync()

// 你可以在事件执行完后继续做动作
plusStateAsync$
  .delay(1000)
  .do(() => stream.plusOne())
  .subscribe()

// subscribe 继续输出：
// 26    - plusStateAsync()
// 延迟 1 s
// 27    - plusOne()

dispose

dispose 用于卸载 StateStream。

例子

const stream = new StateStream('example', 0)

stream.subscribe(state => console.log(state))

stream.next(state => state + 1)

// 卸载
stream.dispose()

stream.next(state => state + 1)

// subscribe 输出：
// 0
// 1
// 卸载后不再输出

stream.getState()
// 1
// 卸载后依然可以拿到当前值，并且可以看到卸载后的 state 更新操作没有生效。

1.1 StateStream