Не могу заставить самый простой магазин mobx работать с наблюдателем

Я только начал пробовать mobx-react с помощью хранилищ и хочу использовать хранилище плюс один наблюдаемый объект, но даже не могу заставить это работать.

С @observer я получаю ошибку Uncaught TypeError: Cannot assign to read only property 'render' of object '#<ProxyComponent>'.

Без него значение становится 1.

Я не уверен, что здесь не так, есть идеи?

import {observable} from 'mobx'
import {inject, observer} from 'mobx-react'

class AppStore {
  @observable value = 1;
}

@inject('store') @observer
class App extends React.Component {
  render(){
    const {store} = this.props
    return (
      <div>
        {store.value}
      </div>
    )
  }
}

const render = (Component) => {
  const appStore = new AppStore()
  ReactDOM.render(
    <AppContainer>
      <Provider store={appStore}>
        <Component/>
      </Provider>
    </AppContainer>,
    document.getElementById('root'),
  )
}

render(App)

reactjs javascript mobx mobx-react
person simonzack    schedule 17.01.2018    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Ваш код немного неясен, например, откуда вы импортируете Provider и ReactDOM. А также, поскольку render - это функция, используемая ReactDOM, поэтому функция render(), которую вы определили, может конфликтовать со встроенной функцией render().

А также здесь это объясняется

В общем, есть три способа передать магазины в MobX.

1) Явно через реквизит. Легко тестировать и ясно следовать, но может стать комковатым, если у вас есть глубоко вложенные структуры или много хранилищ (вы можете решить последнее, имея хранилище для магазинов)

2) Импортируйте хранилища в компоненты напрямую и просто используйте их :) Это MVP передачи хранилищ, но автономное тестирование компонентов быстро становится сложным, поскольку вы должны сначала убедиться, что ваши глобальные хранилища находятся в правильном состоянии

3) Передайте магазины через контекстный механизм React. Провайдер Redux использует это, как и пакет mobx-connect. Контекст передается неявно, и глубокий компонент может извлекать данные из контекста, но его по-прежнему легко протестировать, поскольку вам нужно только убедиться, что вы настроили некоторый контекст перед тестированием компонента.

В вашем случае вы используете третью точку. Итак, я создал jsfiddle здесь, где находится магазин передается как props, как в пункте 1.

person pritesh    schedule 17.01.2018
comment
Спасибо, но, как вы заметили, мне нужен ответ на механизм 3. Мой реальный код более сложен, поэтому 1) не идеален. - person simonzack; 17.01.2018

arrow_upward
0
arrow_downward

Оказывается, это проблема конфигурации (горячего загрузчика веб-пакетов), а не проблема самого кода (который работает под jsfiddle).

Добавление 'react-hot-loader/babel' в 'plugins' в 'babel-loader' webpack, похоже, работает.

person simonzack    schedule 17.01.2018