Flux的学习（乱写的）

为什么还要学 Flux?

做一个操作，要么是对，要么是错，根本没有抢救余地

callback function(){
    $("#ddd").innerHTML.append();
}

在我们传统的js代码中，比如写一个用户验证

function login(){
    var data = {
        name: xxx,
        pwd: xxx
    }
    $.post(url,data,function(){
        ...
    })
}

然后这种代码会出现在我们写的每一个页面中去~

。。。。

我们写了Actions，Store后，会发现一个事情

Actions和Store会出现耦合的现象

甚至

代码的摆放顺序都要一样

//定义一个action,action依赖一个store
const action = new Actions();
//定义一个存储
const store = new Store(action);

所以我们现在要对他们解耦，需要再新增一个

Dispatcher：分发者，让他们两个解耦，从而让他们两个没有联系，

并且这个是一个单例的

如果分发者不是单例的话，怎么会知道这么多actions和Store有没有联系，能够确保，所有的action和Store都能在这里面找到

并且这个还能进行一些处理。比如什么筛选啊，过滤啊，异步操作

//这是一个单例的，所以不需要定义一个类了
const storeCallbackList = [];

const Dispatcher = {
    //告诉要连接什么东西，store的方法
    register(storeCallback){
        //注册的方法保存下来
        storeCallbackList.push(storeCallback);
    },

    //定义一个dispatch方法来把事情处理掉
    dispatch(action){
        for(let callback of  storeCallbackList){
            //把action的内容传递到store中去执行
            callback(action);
        }
    }
}
//暴露出去
export default Dispatcher;

dispatcher

让store与action解耦
让组件对于action的单例依赖取消了，变成了内部定义使用了

中间件

也就是说，能在dispatch做一些其他的操作

使用的角度来看》

如果我们需要添加一个事件，那么就需要在这个组件中new 一个Action用来新增时间

this.action.add("showFooter",{type:"none"});

那么如何接收这个事件呢？类似于jQuery中的on

    store.on("showFooter",(data)=>{
      let obj = data.showFooter;
      (obj.type === "show")?this.setState({
        footer: 'show'
      }):this.setState({
        footer: 'none'
      });
      this.buildFooter();
    });

相当于，执行showFooter事件，然后得到返回值。。。

最后编辑于：2018.04.13 21:51:01