javascript - 像 Redux 一样构建 Mobx 项目

标签 javascript reactjs mobx

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

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

最佳答案

装饰器 (@) 是将 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)

关于javascript - 像 Redux 一样构建 Mobx 项目,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46840028/

相关文章:

javascript - 如何访问 Next.JS 自定义 404 页面上的当前路由?

javascript - 数据表对每行特定单元格求和

javascript - 在 react-native-tab-view 中创建路由时出现不变冲突

javascript - 使用 MobX 中的 `useLocalObservable` 来处理 TypeScript 时出现 TypeError?

javascript - Mobx 可观察数组未更新

javascript - $http.get 来自 2 个 jsons Angular

javascript - 为 iframe 准备 html 代码时附加 <script> : without executing

reactjs - 使用react-dropzone-uploader 缩小vite 构建后的错误

javascript - 将鼠标悬停在嵌套的 React 组件上会触发父组件 onMouseOut 和无限循环

reactjs - 异步更新 mobx React hook 上的存储