Question

我有一个商店使用来自mobx-utils的fetch执行asyncAction从我的服务器获取图表数据。

看起来像这样：

class GraphStore {
    @observable
    public loading: boolean;
    @observable
    public datapoints: any[];

    @asyncAction
    *fetch(id: string) {
         const datapoints = yield fetch('/api/datapoints');
         this.loading = false;
         this.datapoints = datapoints;
    }
}

在我的组件中，我这样使用它：

@inject(STORE_GRAPH)
class Graph {
componentWillMount() {
    const graphStore= this.props[STORE_GRAPH] as GraphStore;
    const { id }  = this.props;

    graphStore.fetch(id);
}
render(){
    const graphStore= this.props[STORE_GRAPH] as GraphStore;
    if(graphStore.loading)
        return <h2>Loading</h2>

    return (
       <Chart datapoints={graphStore.datapoints}/>
    );
}

这很好用，但是当我想扩展它以在同一页面上显示2个图形时，我不知道该怎么办？基本上我想要一个像这样的父组件：

render() {
    return (
        <Graph id="foo"/>
        <Graph id="bar"/>
    );
}

基于此代码，相同的图形存储被注入到两个组件中，导致2个提取出去，两个图形最终都具有相同的数据点 - 无论哪个都是最后一个。

这样做的正确方法是什么？我只是想错了吗？

Answer 1

有很多方法可以做到这一点，但我会利用MobX的面向对象特性，并创建一个数据存储，实例化并作为提供程序传递给所有组件。您可以将此视为您的本地数据库＆＃34;如果你愿意的话。

然后只需在该数据存储上添加方法即可获取并创建Graphs的不同实例。

这里有一些示例代码（没有打字稿）

// stores/data.js

import Graph from './Graph';

class DataStore {

  @observable graphs = observable.map();

  @action getGraphById(id) {
    if (!this.graphs.has(id)) {
      this.graphs.set(id, new Graph(id))
    }
    return this.graphs.get(id);
  }

}

export default new DataStore();

然后创建一个可实例化的Graph对象

// stores/Graph.js

export default class Graph {
  @observable id;
  @observable loading = false;
  @observable datapoints = [];

  constructor(id) {
    this.id = id;
    if (!this.hasData) {
      this.fetch();
    }
  }

  @computed get hasData() {
    return this.datapoints.length;
  }

  @action async fetch() {
    this.loading = true;
    const datapoints = await fetch(`/api/datapoints/${this.id}`);
    this.loading = false;
    this.datapoints = datapoints;
  }
}

在您的组件树中，您可以通过提供商传递dataStore

import dataStore from './stores/data'

<Provider stores={{ data: dataStore }}>
  <Graph id="foo" />
  <Graph id="bar" />
</Provider>

然后只需使用组件中的id prop来启动提取

@inject('data')
@observer
class Graph extends Component {

  @observable graph;

  componentWillMount() {
      const { id, data }  = this.props;
      this.graph = data.getGraphById(id);
  }

  render() {
    if (this.graph.loading) {
      return <h2>Loading</h2>
    }
    return (
       <Chart datapoints={this.graph.datapoints} />
    );
  }
}

在同一页面上多次使用单个商店

1 个答案: