Я играл с этим некоторое время, и не уверен, что это невозможно, или если я просто пропустил что-то фундаментальное в ES6, React или MobX.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 элемента, третий предмет будет добавлен в магазин только через 5 секунд, но рендер не будет автоматически запущен на компоненте, чтобы элемент не отображался. Когда я заставляю функцию рендеринга стрелять, она появится.
Я использую маршрутизатор для вызова этого представления, так что, возможно, это также проблематично?
Я просто изучаю Mobx, реагирую и т. Д., Поэтому любая помощь приветствуется. Кажется, что все примеры используют только один или два магазина.