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