McFly：让Flux架构变得简单易用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01177/article/details/142609034

McFly：让Flux架构变得简单易用

mcfly Flux architecture made easy 项目地址: https://gitcode.com/gh_mirrors/mcf/mcfly

项目介绍

在开发ReactJS应用时，使用Facebook的Flux架构可以极大地提升开发效率。Flux架构与ReactJS的单向数据流模型完美契合，但Facebook的Flux库仅提供了Dispatcher，以及一些Actions和Stores的示例，缺乏对Action和Store创建的辅助工具，且Stores需要依赖第三方事件系统。

McFly 是一个旨在简化Flux架构使用的库，它不仅提供了Facebook的Dispatcher，还提供了用于创建Actions和Stores的工厂方法。通过McFly，开发者可以更轻松地实现Flux架构，减少样板代码，提升开发效率。

项目技术分析

Dispatcher

McFly使用了Facebook Flux的Dispatcher。当McFly实例化时，会创建一个单一的Dispatcher实例，开发者可以通过以下方式访问它：

var mcFly = new McFly();
return mcFly.dispatcher;

所有创建的Actions和Stores都会存储在McFly对象的actions和stores属性中。

Stores

McFly提供了一个createStore辅助方法，用于创建Store实例。Store实例已经与EventEmitter合并，内置了emitChange、addChangeListener和removeChangeListener方法。创建Store时，可以通过methods参数指定要添加到Store对象的公共方法。每个Store都会自动注册到Dispatcher，并且dispatcherID会存储在Store对象中，以便在waitFor方法中使用。

创建Store的示例如下：

var _todos = [];

function addTodo(text) {
  _todos.push(text);
}

var TodoStore = mcFly.createStore({
  getTodos: function() {
    return _todos;
  }
}, function(payload){
  var needsUpdate = false;

  switch(payload.actionType) {
  case 'ADD_TODO':
    addTodo(payload.text);
    needsUpdate = true;
    break;
  }

  if (needsUpdate) {
    TodoStore.emitChange();
  }
});

如果需要确保其他Store的处理程序先运行，可以使用Dispatcher.waitFor方法。

Actions

McFly的createActions方法用于创建Action Creator对象。提供的所有方法都会插入到Dispatcher的dispatch调用中，并返回原始名称，这样在调用这些方法时，分发操作会自动执行。

创建Actions的示例如下：

var mcFly = require('../controller/mcFly');

var TodoActions = mcFly.createActions({
  addTodo: function(text) {
    return {
      actionType: 'ADD_TODO',
      text: text
    }
  }
});

所有Actions方法都返回Promise对象，以便组件可以响应长时间运行的函数。Promise会在没有参数的情况下解析，因为信息应通过Dispatcher和Stores传递。如果Action方法返回一个假值，Promise将被拒绝，且Dispatcher不会被调用。