Question

Baobab看起来像使用Angular 2构建Flux应用程序的一种有趣方式，但我没有找到任何示例。

我的主要问题是我如何向Baobab订阅一个Angular组件：

@Component
( { selector: 'foo'
  , template:
    ` <ul>
        <li *ngFor='#color of ( colors | async )'>
          {{ color }}
        </li>
      </ul>
    `
  }
)
export default class FooComponent {
  colorsCursor: any

  constructor ( @Inject (storeToken) private store ) {
    // https://github.com/Yomguithereal/baobab
    this.colorsCursor = store.select('palette', 'colors')

    this.colorsCursor.on
    ( 'update'
    , () => {
        // What do I put here to update the component ?
      }
    )
  }

  get colors () {
    return this.colorsCursor.get ()
  }
}

或者我应该通过组件中的输入推送数据？但我不知道如何连接所有这些......

Answer 1

要使数据流清除/不直接从控制器修改树，您可能需要一个服务（用于操作）。从控制器调用它来请求更改，并让控制器监视来自猴面包树状态树的更改。

然后，你有这样的流程（来自http://christianalfoni.github.io/javascript/2015/02/06/plant-a-baobab-tree-in-your-flux-application.html）：

Architecture using Baobab

            |------------|
        |-> | State tree | --|           
        |   |------------|   |
        |                    v
  |---------|         |------------|
  | Actions | <------ | Components |
  |---------|         |------------|

对于Angular 2式组件层次结构，我将光标 .on（＆＃39; update＆＃39; ... 方法放在更高级别的组件中，并通过通过输入将值降低到子组件。

            |------------|
        |-> | State tree | --|           
        |   |------------|   |
        |                    v
  |---------|         |----------------|
  | Actions | <------ | Component(*)   |
  |---------|         |----------------|
                          |     ^
                       @Input  @Output (EventEmitter)
                          v     |
                      |------------------|
                      | Child Components |
                      |------------------|

组件（*）在React中充当控制器视图，靠近顶部，并侦听由猴面包树状态树广播的事件。

另外，我认为使用

changeDetection: ChangeDetectionStrategy.OnPush

子组件中的

可能会改进，因为我们确保它只会在输入推动上面的更改时更新。

我在Codepen有一个这样的例子，但是没有使用Actions Service。

http://codepen.io/mikkokam/pen/zqeWmQ?editors=0010

如何使用Baobab更新angular2组件

1 个答案: