mobx-react 创建可观察存储
mobx-react create observable store
我已经研究了一段时间了,不确定这是否可行,或者我是否只是缺少 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>
);
}
}
我不想从根组件通过提供程序传递它,也不想在导出中使用 'new' 关键字实例化商店。我实际上有几十家商店,所以我只希望根据视图的需要创建它们。
以上代码将呈现前 2 个项目,第 3 个项目将在 5 秒后添加到商店,但渲染不会自动在组件上触发,因此该项目不会出现。当我强制渲染函数触发时,它会出现。
我正在使用路由器调用此视图,所以这可能也有问题吗?
我只是在学习 Mobx、React 等,所以非常感谢您的帮助。所有示例似乎都只使用一两个商店。
所以在花了一些时间之后,事实证明这对 MobX 来说根本不是问题。
反应和反应路由器的版本似乎是问题所在。
现在使用 React router dom 没问题。
我已经研究了一段时间了,不确定这是否可行,或者我是否只是缺少 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>
);
}
}
我不想从根组件通过提供程序传递它,也不想在导出中使用 'new' 关键字实例化商店。我实际上有几十家商店,所以我只希望根据视图的需要创建它们。
以上代码将呈现前 2 个项目,第 3 个项目将在 5 秒后添加到商店,但渲染不会自动在组件上触发,因此该项目不会出现。当我强制渲染函数触发时,它会出现。
我正在使用路由器调用此视图,所以这可能也有问题吗?
我只是在学习 Mobx、React 等,所以非常感谢您的帮助。所有示例似乎都只使用一两个商店。
所以在花了一些时间之后,事实证明这对 MobX 来说根本不是问题。 反应和反应路由器的版本似乎是问题所在。 现在使用 React router dom 没问题。