Я пытаюсь сделать реактивный счетчик, как пример простейшего компонента в связке react+mobx+mobx-react+next. При нажатии на кнопку, в консоли разработчика mobx появляется надпись, что action сработал, но на странице данные не обновляются. При этом если выводить не tick, а геттер ticks, показывает вообще NaN. Код, который я написал: Test.jsx - компонент:
import React, {Fragment} from 'react'
import {observer} from 'mobx-react'
export default observer(({store})=>{
const click = ()=>{
store.upTick()
}
return(
<Fragment>
<p>{store.tick}</p>
<button onClick={click}>+</button>
</Fragment>
)
})
test.js - страница next.js:
import React from 'react'
import testStore from '../store/TestStore'
import Testc from '../components/Test'
export default ()=>(
<Testc store={testStore}/>
)
TestStore.js - стор:
import {observable, decorate, action, computed} from 'mobx'
class TestStore{
tick = 0;
upTick(){
this.tick++
}
get ticks(){
return this.tick+1;
}
}
decorate(TestStore,{
tick: observable,
upTick: action,
ticks: computed
})
const testStore = new TestStore();
export default testStore;
Приложение создано с помощью create-react-app, следовательно, декораторы не использую.