mobx-react創建可觀察商店

我一直在玩這個遊戲一段時間，我不確定它是不可能的，或者我只是在ES6，React或MobX中丟失了一些基本的東西。mobx-react創建可觀察商店

我想在下面的單獨文件中有一個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> 
    ); 
    } 
}

我不想通過根組件的提供者來傳遞它，或者讓商店在導出中使用'new'關鍵字實例化。我其實有幾十家商店，所以我只希望它們根據需要創建視圖。

上面的代碼會渲染前兩個項目，第三個項目只會在5秒後添加到存儲區，但渲染不會自動在組件上觸發，因此該項目不會出現。當我強制渲染渲染功能時，它會出現。

我正在使用路由器來調用這個視圖，所以也許這也有問題？

我剛剛學習Mobx，反應等，所以任何幫助表示讚賞。所有的例子似乎只使用一個或兩個商店。

來源

2017-02-09 rygo18

所以在花了一點時間後，發現這對MobX來說並不是問題。反應和反應路由器的版本似乎是問題。現在使用反應路由器，它很好。

來源

2017-02-14 17:56:35 rygo18

mobx-react創建可觀察商店

回答

相關問題