mobx: отслеживать изменение данных в хранилище

у меня есть хранилище данных store в которые мой компонент (react) вносит данные

у компонента есть кнопка apply, которую хотелось бы делать активной, только когда внесенные данные корректны, т.е.

class Element_Apply extends Component<any> {

    // отрисовка компонента
    render() {

        return (
<div className = 'element-apply'>
    <button disabled = {this.props.store.check()}>Применить</button>
</div>
        );
    }
}

где функция check() - функция в хранилище, которая проверяет данные на корректность

данным в хранилище записываются так:

this.props.store['название поля'] = value;

название полей может быть произвольными

Как мне сделать так, чтобы в зависимости от того, что выдает функция check() активировать или деактивировать кнопку.

Т.е. надо сделать так, чтобы когда изменялись данные в store выполнялась проверка check() и, если требуется, то перерисовывалась бы кнопка.

P.S.

попытался сделать это через отслеживаемую переменную

@observable private m_checked: boolean = false;

реакцию на изменение всего хранилища:

   reaction(
        () => this,
        () => {
            m_checked = xxx;
        }
   );

и функцию

check(): boolean {

    return this.m_checked;

}

, но реакция не сработала и вообще мне кажется, что запутался и ваяю костыль жуткий :(


Ответы (0 шт):