Troy's 博客

var { observable, autorun } = require("mobx");
var Entity = require('xx/xxxx/entity');

var todoStore = observable({
  todos: [],
  get completedCount() {
    return this.todos.filter(todo => todo.completed).length
  }
})

autorun(function () {
  // For Backbone
  this.xxxBackBoneComponent = new Entity({
    model: todoStore.todos,
    editable: true
  });

  // For Arch
  active.render($html, () => {
    this.xxArchComponent = arch.getComponent(xxx);
  });
})

todoStore.todos[0] = {
  title: "Take a walk",
  completed: false
}

stores
--root.ts
--domain
----aaaStore.ts
----bbbStore.ts
--ui
----application.ts

export default class RootStore {
  @observable
  aaStore;

  @observable
  bbStore;

  @observable
  applicationUIStore;

  constructor() {
    // Domain Store Init
    this.aaStore = new AStore(this);
    this.bbStore = new BStore(this);
    ...

    // UI Store Init
    this.applicationUIStore = new ApplicationUIStore(this);
    ...
  }
}

ContainerAComponent
--ContainerAComponent.tsx
--ContainerAComponentUIStore.ts

export default class ContainerAComponentUIStore {
  rootStore;
  constructor(rootStore) {
    this.rootStore = rootStore;
  }

  @observable
  addHoc = '';
  
  @action.bound
  onAdhocChange = (addHocNewValue) => {
    ....
  }

export class ContainerAComponent extends React.Component {
  handleAdhocChange = (e) => {
    this.props.onAdhocChange(e.target.value);
  }
  ...
}
export default connectComponentStore(ContainerAComponent, ContainerAComponentUIStore);

export default (WrapperedComponent, ComponentStore) => {
  @inject('appStore')
  @observer
  class Connect extends React.Component {
    @observable componentStore;

    constructor(props) {
      super(props);
      this.componentStore = new ComponentStore(props.appStore);
      this.ref = createRef();
    }

    static displayName = `${WrapperedComponent.displayName || WrapperedComponent.name}-withUIStore`

    componentDidMount() {
      this.componentStore.mapState(this.props);
    }

    componentDidUpdate(preProps, preState) {
      this.componentStore.mapState(this.props);
    }

    render() {
      return (<WrapperedComponent ref={this.ref} {...this.componentStore.toProps} {...this.props} />);
    }
  }

  return Connect;
};