Я только начал изучать Mobx для его реализации в своих проектах, и я столкнулся с большой проблемой: мне кажется, я не понимаю, как работают действия.
Я следовал этому хорошему учебнику: https://hackernoon.com/how-to-build-your-first-app-with-mobx-and-react-aea54fbb3265 (полный код учебника находится здесь: https://codesandbox.io/s/2z2r43k9vj?from-embed), и он работает гладко. Я пытался создать небольшое приложение React на своей стороне, пытаясь сделать то же самое, что и упомянутый учебник, и все же он терпит неудачу. Я уверен, что есть небольшая деталь (поскольку приложение довольно простое), которую я не вижу, поэтому я был бы признателен за помощь.
Я также пытался найти похожие случаи в моем, но я не нашел ничего в результате быстрого поиска (что заставляет меня думать, что проблема еще более незначительна ...)
Мой код такой:
import React, { Component } from 'react';
import { decorate, observable, action, configure } from 'mobx';
import { observer } from 'mobx-react';
configure({ enforceActions: 'always' });
class Store {
my_number = 1;
addNumber() {
this.my_number += 1;
}
removeNumber() {
this.my_number -= 1;
}
}
decorate(Store, {
my_number: observable,
addNumber: action,
removeNumber: action
})
const my_store = new Store();
const Button = (props) => {
if (props.store.my_number === 1) {
return (
<div>
<button onClick={props.store.addNumber}>+</button>
</div>
)
} else if (props.store.my_number === 4) {
return (
<div>
<button onClick={props.store.removeNumber}>-</button>
</div>
)
} else {
return (
<div>
<button onClick={props.store.addNumber}>+</button>
<button onClick={props.store.removeNumber}>-</button>
</div>
)
}
}
const ObserverButton = observer(Button);
const DisplayNumber = (props) => {
return (
<h1>My number is: {props.store.my_number}</h1>
)
}
const ObserverDisplayNumber = observer(DisplayNumber);
export class SimpleMobxStore extends Component {
render() {
return (
<div>
<ObserverButton store={my_store} />
<ObserverDisplayNumber store={my_store} />
</div>
)
}
}
И мои мысли по его развитию были (я также был бы признателен за предложения о том, как улучшить мой поток мыслей, если он плохой):
Мне нужен текст на экране, который показывает число от 1 до 4. Над этим текстом я хочу иметь кнопку, которая позволяет мне увеличивать или уменьшать это число, добавляя или вычитая единицу каждый раз. Я хочу, чтобы эта переменная (текущий номер) была сохранена в отдельном хранилище. Этот магазин будет включать в себя:
- Мой номер
- Способ увеличения числа
- Метод уменьшения числа
Кроме того, я создам два компонента: компонент кнопки, который отображает мою кнопку в зависимости от текущего номера, и компонент отображения.
Моим наблюдаемым будет число в магазине, тогда как два метода должны быть оформлены как действия, так как они изменяют наблюдаемую переменную.
Мои компоненты кнопок и дисплея будут наблюдателями, так как они должны быть перерисованы после изменения номера.
С этим простым рассуждением и кодом я ожидал, что он заработает, но вместо этого я получаю:
Ошибка: [mobx] Так как строгий режим включен, изменение наблюдаемых наблюдаемых значений вне действий не допускается. Пожалуйста, оберните код в action, если это изменение предназначено. Пытался изменить: Store@4.my_number
Журнал, кажется, указывает, когда я определяю const my_store = new Store();, но это сделано в учебнике, и оно работает там.
Есть идеи, где это терпит неудачу и почему?
Спасибо