Cerebral

Cerebral 是 JavaScript MVC 应用程序状态管理器，提供流行的 JavaScript 框架的声明性状态和副作用管理解决方案，拥有独立的调试器，在 Cerebral 中，应用程序的状态被存储在单个的树模型中，该模型管理着所有服务器端和客户端的状态。

支持的 JavaScript 框架

• Angular
• Vue
• React
• Inferno
• Preact

示例

@cerebral/angular Angular 视图 for Cerebral.

安装

npm install @cerebral/angular @angular/core @angular/platform-browser babel-plugin-transform-decorators-legacy

Cerebral Service

Cerebral 服务将 Cerebral 控制器提供给 angular 应用程序：

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'

import { provide } from 'cerebral'
import { AppService } from '@cerebral/angular'

import { AppComponent }  from './app.component.ts'
import { SomeAngularService } from './SomeAngularService'

// Create a factory to instantiate Cerebral. It can receive
// dependencies which you can "provide" to Cerebral to be used
// within sequences
export function configureApp(someAngularService : SomeAngularService) {
  return new AppService({
    // We use the "provide" function to an angular service to the sequences
    // of Cerebral
    providers: [
      provide('someAngularService', someAngularService)
    ]
  })
})

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
     {
      provide: AppService,
      useFactory: configureApp,
      deps: [SomeAngularService]
    },
  ]
})
export class AppModule {}

connect decorator

连接装饰器连接状态并向组件发出信号：

import {
  Component,
  ChangeDetectionStrategy,
  ChangeDetectorRef
} from '@angular/core'
import { sequences, state } from 'cerebral/tags'
import {
  connect,
  AppService,
  CerebralComponent
} from '@cerebral/angular'

@Component({
  selector: 'app-component',
  template: `
    <div (click)="onClick()">{{foo}}</div>
  `,
  // Change detection needs to be set to "OnPush"
  changeDetection: ChangeDetectionStrategy.OnPush
})
@connect({
  // For AOT to work you will have to use the array version of template
  // tags
  myName: state(['foo']),
  onClick: sequences(['clicked'])
})
export class AppComponent extends CerebralComponent {
  // You have to inject "ChangeDetectionRef" and "ControllerService" and pass
  // them to parent for connect to do its work
  constructor(cdr: ChangeDetectorRef, app: AppService) {
    super(cdr, app)
    app.getSequence('onClick')()
  }
}