主要内容

• 完善项目架构
• 定义 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