@venanen

Почему не происходит ререндер компонента при обновлении стора?

Я пытаюсь сделать реактивный счетчик, как пример простейшего компонента в связке 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, следовательно, декораторы не использую.
  • Вопрос задан
  • 224 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы