javascript - 像 Redux 一样构建 Mobx 项目

Question

我想将 mobx 项目构建为看起来像 redux 项目。将配置存储在一个文件中，将操作存储在另一个文件中，也许在第三个文件中存储一些其他逻辑和 react 。

此外，最佳实践是什么？拥有一个像 redux 这样的商店或者更多。我该怎么做(从类内部取出 @action 并从另一个文件中分派(dispatch)它)。有人能举出一些构建项目的好例子吗？

Answer 1

装饰器 (@) 是将 MobX 与类结合使用的一种好方法，但您也可以在不使用它们的情况下使用 MobX。

您可以通过使用 action 的函数版本来构造您的应用程序，如下所示:

示例 (JSBin )

// state.js
useStrict(true);

const appState = observable({
  count: 0,
  firstName: 'Igor',
  lastName: 'Vuk',
  fullName: computed(function() {
    return `${this.firstName}-${this.lastName}`;
  })
});

// actions.js
const increment = action(function() {
  ++appState.count;
});

const changeLastName = action(function() {
  appState.lastName = 'Stravinskij';
});

// app.js
autorun(() => {
  console.log(`${appState.fullName} has been logged in for ${appState.count} seconds`);
});

setInterval(() => {
  increment();
}, 1000);

setTimeout(() => {
  changeLastName();
}, 3000)