比较redux和reflux以及自己写个TinyFlux?

2020年7月12日 18:03:30H5教程评论357 views阅读模式

看了redux和reflux，感觉redux好复杂啊，看reflux，1个小时就能弄懂，可是看redux，1天下来都迷迷糊糊的。

感觉flux不就应该是view层发消息给store，store根据消息去修改数据，修改完数据后通知涉及到被修改的view组建刷新state吗。。。

然后我看着reflux的使用方式（它的源代码没怎么看，感觉还是多了），自己写了个tinyFlux。。。二楼附上。。各位看看。。。。可能还太幼稚了。。。欢迎批评啊。。。

回复内容：

谢邀，Flux 相关的轮子已经太多了，实在看不过来，抱歉。

简单说说 Reflux 和 Redux 的区别吧。

之前我在如何理解 Facebook 的 flux 应用架构？ - 知乎用户的回答里提到过，目前市面上很多 Flux 相关的框架就是把 Dispatcher 隐藏了，然后封装了 Action Creator 和 Component 绑定的细节，简单地说就是「简化 Flux 里冗余的代码和操作」。

Reflux 在实现上面说到的内容的基础上，又提供了很多开发者喜欢的功能，比如 View 监听 Action 这种违背 Flux 概念但是确实在实际应用中很方便的特性。

而 Redux 并不仅仅是「简化 Flux」，它重新定义了 Flux 中每一个角色的功能、职责及实现方式。其中最大的不同是没有 Store 的概念（或者说 Store 不再需要用户去定义），而增加了 Reducer 的概念。Store 会通过我们定义的 Reducer 自动生成，使用 redux.createStore 方法。此外，Redux 定义了一个 middleware 机制，可以让我们在 Action 中更方便的处理业务逻辑。

总结一下就是，如果你觉得目前 Flux 用着不爽太多冗余代码，那么你写的 TinyFlux 很不错，解决了你的很多问题；然而如果你想拥有更多 redux 带来的新特性，或者说你喜欢并推崇不可变的数据结构，或者说你想显得逼格比较高，那么看懂并会用 redux 绝对是你的不二选择。

PS. redux 确实不错，我们已经开始着手在生产环境中使用了。 Redux 核心概念
深入浅出Redux
http://www.
w3ctech.com/topic/1561

//TinyFlux.js
function createStore (store, ...args) {
  if (!store) {
    throw new Error('请定义store');
  };
  if (typeof store.init === 'function') {
    store.init(args);
  };
  if (typeof store.actions !== 'function') {
    throw new Error('actions应该是一个返回一个对象的function，对象里的方法都要用箭头表达式来书写，利用箭头表达式的this绑定。');
  };
  store.actions = store.actions();
  if (store.subscriber || store.emit) {
    throw new Error('不该存在subscriber和emit');
  };
  store.subscriber = [];
  store.emit = function(argument) {
    store.subscriber.forEach(component => component.reload());
  };
  return store;
}

function connect (store, def) {
  return {
      getInitialState: function(){
        var state = {};
        for (var i in def) {
          try{
            state[i] = eval('store.'+def[i]);
          } catch(err) {
            console.log(err);
          }
        };
        return state;
      },
      reload: function() {
        var state = {};
        for (var i in def) {
          try{
            state[i] = eval('store.'+def[i]);
          } catch(err) {
            console.log(err);
          }
        };
        this.setState(state);
      },
      componentDidMount: function(){
        store.subscriber.push(this);
      },
      componentWillUnmount: function() {
        store.subscriber.splice(store.subscriber.indexOf(this),1);
      }
  };
}

module.exports = {
  createStore: createStore,
  connect: connect
}