Как получить состояние из хранилища Mobx React.js?

Question

[Константин]

Здравствуйте, изучаю Mobx и запнулся, не могу понять в чем причина.

import { observable, action } from 'mobx';

class SetingStore {
    @observable app

    constructor() {
      this.setSeting()
    }
    // @computed get isSetSeting() {
    //   return this.app
    // }
    @action setSeting() {
      fetch('./static/setings.json')
      .then(response => response.json())
      .then(data => {this.app = data.app})
    }

}
const setingStore = new SetingStore()

export default setingStore
export { SetingStore }

Вот тут пытаюсь вывести.

import React, { Component } from "react"
import { Provider } from 'mobx-react'
import {configure } from 'mobx'

/* stores */
import setingStore from './stores/seting-store'
import menuStore from './stores/menu-store'

/* components */
import Menuapps from './components/Menuapps'
import Titlehead from "./components/Titlehead"
import Sprite from "./components/Sprite"

// Строгий режим
configure({ enforceActions: 'observed' })

const stores = { setingStore, menuStore }

class App extends Component {
  render() {
    return (
      <Provider { ...stores }>
        <div className="body">
          <header>
            {console.log(setingStore.app)}
            <Menuapps />
            <Titlehead />
            {/* {setingStore.app === "default" ? 'nav' : ''} */}
          </header>
          
          <Sprite/>
        </div>
      </Provider>
    )
  }
}
export default App

Не могу понять почему "setingStore.app" пишет undefined
Помогите пожалуйста понять

Answer 1

[Павел Диденко]

Потому что вы достаете стор из замыкания, а не из провайдера.

Создайте компонент, отрендерите его внутри Provider, оберните в inject('settingStore') и все заработает. Ну и исправьте опечатку с seting -> setting

Для краткости можно экспортировать так export default new SettingsStore()

Comments

[Константин]

Спасибо большое !

[Константин]

Извините еще вопрос больше не у кого спросить: Насколько важно работать в "strict-mode"?
Без него я могу вывести в компоненте {settingsStore.app}.
А с ним мне нужно все оборачивать а @action
То-есть мне нужно создать функцию ?
action isSetting(){
return this.app
}
а выводить уже {settingsStore.isSetting} ?

[Павел Диденко]

Harconnen, изучайте документацию MobX, или посмотрите уроки на ютубе от Евгения Ковальчука, у него есть небольшой и очень полезный материал по MobX.

Под тот пример, который вы написали вам нужно брать напрямую observable свойство settingStore.app

Стрикт мод может ругаться на что-то другое, например если у вас чейнится action, то присвоение внутри .then делается при помощи runInAction(() => { this.app = 'что-то' })

[Константин]

Спасибо!