阅读 13

React + MobX + Electron + Node.js + MongoDB 全栈项目开发实践(三)使用 MobX 实现流畅数据流

test.md# 主要内容

  • 完善项目架构
  • 定义 store
  • 声明 observer

项目架构完善

为了之后项目的拓展性,将所有的数据集中放在 store/ 目录下。现在项目结构如下:

src/
  App.js
  App.css
  index.js
  conponents/
  	(some components)
  containers/
  	(some containers)
  stores/
  	(some stores)
复制代码

先看一下如何组织 store。目前是按照功能来组织,现在只开发了记分功能,所以只有一个 scoreStore,后续还会有 userStore 来管理和用户登录相关的数据,等等。

scoreStore.js 中定义了如下 observable 和 action:

import { observable, action } from 'mobx';

class ScoreStore {
  // 数据
  @observable score = 0;

  // 方法
  @action setScore (score) {
    this.score = score
  }

}

export default new ScoreStore();
复制代码

HomePage 中使用则需要在前面 inject 这个 store,并加上 observer 修饰:


// HomePage.js

// 一系列导入中加上 mobx-react 相关
import { inject, observer } from "mobx-react";

@inject ("scoreStore")
@observer
class HomePage extends Component {
  // 一些代码…

  // 访问 scoreStore 的数据或方法时时使用 this.props
  this.props.scoreStore.setScore(score);
  // 更多代码…
}
复制代码

其他需要访问数据的组件也同理做修改,这样,在修改数据的时候,全局都会相应变化了。

参考网页

github.com/gothinkster… 主要参考了 store 的结构。

系列文章

React + MobX + Electron + Node.js + MongoDB 全栈项目开发实践(零)前言

React + MobX + Electron + Node.js + MongoDB 全栈项目开发实践(一)

React + MobX + Electron + Node.js + MongoDB 全栈项目开发实践(二)允许 decorator

关注下面的标签,发现更多相似文章
评论