mobx-react 创建可观察存储答案

【问题标题】：mobx-react create observable storemobx-react 创建可观察存储
【发布时间】：2017-06-27 16:07:32
【问题描述】：

我一直在玩这个，但不确定它是否不可能，或者我只是缺少 ES6、React 或 MobX 中的一些基本内容。

我想将 mobx 存储在一个单独的文件中，如下所示；

import { observable, action } from 'mobx';

export default class Store {

@observable data = [];

@action getAll(){
  this.data = [{
    itemTitle: 'Item One'
  },{
    itemTitle: 'Item Two'
  }]
  return this.data
}

@action pushItem(item){
  this.data.push(item)
}

addAfter5Secs(){
  setTimeout(() => {
    console.log('Item Added')
    this.pushItem({
    itemTitle: 'Item Two'
  })}, 5000)
}

constructor() {
  console.log('Store Created')
  this.getAll();
  this.addAfter5Secs()
}
}

然后我想在视图中导入它并在那时创建该商店的实例。

import React from "react";
import { List, Button } from 'semantic-ui-react';
import { observer, inject } from 'mobx-react';
import Store from '../Data/Store';
import DevTools from 'mobx-react-devtools';

const dataItems = new Store

@observer
export default class ScriptsHome extends React.Component {
  render() {
    const items = observer(dataItems)
    return (
        <List>
        {items.data.map((reg, key) => {
          return(
            <List.Item key={key}>
                     <Button content={reg.itemTitle}/>
                </List.Item>)
          })}
          <DevTools />
        </List>
    );
  }
}

我不想通过根组件中的提供者传递它，也不想在导出中使用“新”关键字实例化存储。我实际上有几十家商店，所以我只希望它们根据视图的需要创建。

上面的代码将渲染前 2 个项目，第 3 个项目将在 5 秒后添加到商店，但不会在组件上自动触发渲染，因此项目不会出现。当我强制渲染函数触发时，它会出现。

我正在使用路由器来调用此视图，所以也许这也有问题？

我只是在学习 Mobx、react 等，因此不胜感激。所有示例似乎都只使用一两家商店。

【问题讨论】：

标签： javascript reactjs ecmascript-6 mobx

【解决方案1】：

因此，在花费了一些时间之后，事实证明这对 MobX 来说根本不是问题。 react 和 react router 的版本似乎是问题所在。现在用 react router dom 就好了。

【讨论】：