react-flux 架构思想

组件间通信：https://blog.youkuaiyun.com/RuiKe1400360107/article/details/82992506

redux的用法：https://blog.youkuaiyun.com/RuiKe1400360107/article/details/83023732

redux拆分：https://blog.youkuaiyun.com/RuiKe1400360107/article/details/83028105

router路由：https://blog.youkuaiyun.com/RuiKe1400360107/article/details/83053997

一、基本概念

Flux 是一种架构思想，专门解决软件的结构问题。它跟MVC 架构是同一类东西

Flux将一个应用分成四个部分：

•    View： 视图层
•    Action（动作）：视图层发出的消息（比如mouseClick）
•    Dispatcher（派发器）：用来接收Actions、执行回调函数
•    Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面

Flux 的最大特点，就是数据的"单向流动"：数据总是"单向流动"，任何相邻的部分都不会发生数据的"双向流动"。

1.         用户访问 View
2.         View 发出用户的 Action
3.         Dispatcher 收到 Action，要求 Store 进行相应的更新
4.         Store 更新后，发出一个"change"事件
5.         View 收到"change"事件后，更新页面

---

二、详细介绍

1.View

举个Demo:

// index.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var MyButtonController = require('./components/MyButtonController');

ReactDOM.render(
  <MyButtonController/>,
  document.querySelector('#example')
);

       上面代码中，，组件的名字不是 MyButton，而是 MyButtonController 。采用的是 React 的 controller view 模式。"controller view"组件只用来保存状态，然后将其转发给子组件

MyButton只有一个逻辑：就是一旦用户点击，就调用this.crateNewItem方法，向Dispatcher发出一个Action。

  createNewItem: function (event) {
    ButtonActions.addNewItem('new item');
  }

上面代码中，调用createNewItem方法，会触发名为addNewItem的Action 

2.Action

每个Action都是一个对象，包含一个actionType属性（说明动作的类型）和一些其他属性（用来传递数据）

在如下Demo里面，ButtonActions 对象用于存放所有的Action。ButtonActions.addNewItem方法使用AppDispatcher，把动作ADD_NEW_ITEM派发到Store

// actions/ButtonActions.js
var AppDispatcher = require('../dispatcher/AppDispatcher');

var ButtonActions = {
  addNewItem: function (text) {
    AppDispatcher.dispatch({
      actionType: 'ADD_NEW_ITEM',
      text: text
    });
  },
};

3.Dispatcher

     Dispatcher的作用是将Action派发到Store。相当于路由器，负责在 View 和 Store 之间，建立 Action 的正确传递路线。

注意！Dispatcher 只能有一个，而且是全局的

Facebook官方的 Dispatcher 实现输出一个类，你要写一个AppDispatcher.js，生成 Dispatcher 实例:

/AppDispatcher.js
var Dispatcher = require('flux').Dispatcher;
module.exports = new Dispatcher();

 

AppDispatcher.register()方法用来登记各种Action的回调函数,Dispatcher收到ADD_NEW_ITEM动作，就会执行回调函数，对ListStore进行操作。注意，！Dispatcher 只用来派发 Action，不应该有其他逻辑：

// dispatcher/AppDispatcher.js
var ListStore = require('../stores/ListStore');

AppDispatcher.register(function (action) {
  switch(action.actionType) {
    case 'ADD_NEW_ITEM':
      ListStore.addNewItemHandler(action.text);
      ListStore.emitChange();
      break;
    default:
      // no op
  }
})

4.Store

Store 保存整个应用的状态。它的角色有点像 MVC 架构之中的Model

以下Demo 中，有一个ListStore，所有数据都存放在那里。ListStore.items用来保存条目，ListStore.getAll()用来读取所有条目，ListStore.emitChange()用来发出一个"change"事件。由于 Store 需要在变动后向 View 发送"change"事件，因此它必须实现事件接口

// stores/ListStore.js
var ListStore = {
  items: [],
  getAll: function() {
    return this.items;
  },
  addNewItemHandler: function (text) {
    this.items.push(text);
  },
  emitChange: function () {
    this.emit('change');
  }
};
module.exports = ListStore;