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

Здравствуйте, изучаю 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
Помогите пожалуйста понять
  • Вопрос задан
  • 137 просмотров
Решения вопроса 1
@Dasslier
FrontEnd Developer
Потому что вы достаете стор из замыкания, а не из провайдера.

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

Для краткости можно экспортировать так export default new SettingsStore()
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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