创建和使用BLoC

前面我们只是知道了如何定义一个BLoC，但是如果想在应用中使用这个BLoC，就需要将其实例化，并且绑定在组件树上。

创建BLoC

Provider

使用Provider组件可以在组件树中提供一个BLoC：

<Provider of={FooBloc}>
  {/*...*/}
</Provider>

jorum会在Provider组件创建的时候实例化一个FooBloc，并且在Provider组件销毁的时候销毁掉对应的BLoC实例。

向BLoC的构造函数传参

如果FooBloc的构造函数是带有参数的，比如：

@bloc
export class FooBloc {
  constructor(
    public a: string,
    public b: string
  ) {}
  //...
}

那么，我们可以使用args属性向BLoC的构造函数传参：

<Provider of={FooBloc} args={['A', 'B']}>
  {/*...*/}
</Provider>

注意args的类型是一个数组

withProvider

使用withProvider高阶组件可以避免在一些情况下手动创建wrapper组件：

const ExampleComponent = withProvider({
  of: FooBloc,
  args: ['A', 'B']
})(() => {
  return (
    <div>
      {/*...*/}
    </div>
  )
})

withProvider的普通使用方式为：

withProvider(a)(b)

其中a就是Provider组件的props（只不过是object而非jsx的表述形式），而b则是一个react组件。

如果你想根据外围输入的props动态产生Provider的props，也可以把上式的a写成一个函数：

const ExampleComponent = withProvider(props => ({
  of: FooBloc,
  args: [props.a, props.b]
}))(() => {
  return (
    <div>
      {/*...*/}
    </div>
  )
})

<ExampleComponent a="A" b="B"/>

并不需要手动实例化

对BLoC实例的维护（创建、销毁）都是由jorum负责的，我们不需要也不应该手动去维护BLoC的实例。

使用BLoC

useBloc

在函数组件中，我们可以使用useBloc这个hook来获取指定BLoC的实例。

const ExampleComponent = (props) => {
  const fooBloc = useBloc(FooBloc)
  // 从这里开始就可以使用fooBloc这个实例了
  return (
    <div>
      {/*...*/}
    </div>
  )
}

Consumer

在类组件中，我们并不能使用useBloc，这时就需要通过Consumer组件来获取BLoC实例了：

<Provider of={FooBloc}>
  <Consumer of={FooBloc}>
    {(fooBloc) => (
      //...
    )}
  </Consumer>
</Provider>