Что лучше написать мои магазины Mobx в отдельном файле или внутри компонента React?

Question

Я видел, что вы можете сделать что-то вроде этого:

// App.js
class App extends Component {
  @observable a = 'something'

  @action change() {
    this.a = 'else'
  }

  render() {
    return (
      ...
    )
  }
}

И я также видел, что вы можете написать свой магазин в отдельном файле (что я и делаю):

// StoreA.js
class StoreA {
  @observable a = 'something'

  @action change() {
    this.a = 'else'
  }
}

// App.js
@observer
class App extends Component {
  constructor() {
    this.store = new StoreA()
  }

  ...
}

Есть ли разница между этими подходами?Один лучше другого?

Answer 1

Вы всегда хотите, чтобы ваш магазин находился в отдельном файле, поскольку вы всегда должны соблюдать принцип Разделения Концерна.

Это не только делает вещь более удобной в обслуживании, удобочитаемой в дальнейшем.

Кроме того, когда речь идет об использовании Mobx и, в частности, React, существует много причин отделить хранилище от файла компонента.

Во-первых, хранилище должно жить независимо от компонента.Вам следует избегать создания нового хранилища внутри конструктора компонента.Проблема с инициализацией хранилища внутри конструктора компонента заключается в том, что каждый раз, когда компонент уничтожается и воссоздается, у вас будет новое хранилище, которое приведет к неточному поведению.

Во-вторых, вы хотите, чтобы хранилище было доступно для совместного использования.между несколькими компонентами внутри вашего приложения, в противном случае вам нужно будет передавать все это как подпорки, что немного грязно.В этом случае вы захотите отделить хранилища приложений от компонента React (иначе у вас будет ад импорта, и вы можете получить круговую ссылку, где ваши файлы будут импортированы из других по кругу), а затем использовать mobx-react Provider и inject и observer для доступа к магазину по вашему приложению.

Я предлагаю вам взглянуть на котельную плиту mobx-реагировать, чтобы увидеть, как это делается https://github.com/mobxjs/mobx-react-boilerplate

Answer 2

Обычно лучше использовать хранилище в другом файле, это делает ваш код чище и легче для чтения.Если вы не используете его повторно, при оценке эффективности между двумя подходами не будет никаких различий, только более чистый код.