微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

React Reflux

分类：React作者：编程之家AI导航网

概念

Reflux是根据React的flux创建的单向数据流类库。
Reflux的单向数据流模式主要由actions和stores组成。例如，当组件list新增item时，会调用actions的某个方法（如addItem(data)）,并将新的数据当参数传递进去，通过事件机制，数据会传递到stroes中，stores可以向服务器发起请求，并更新数据数据库。数据更新成功后，还是通过事件机制传递的组件list当中，并更新ui。整个过程的对接是通过事件驱动的。就像这样：

╔═════════╗       ╔════════╗       ╔═════════════════╗
║ Actions ║──────>║ Stores ║──────>║ View Components ║
╚═════════╝       ╚════════╝       ╚═════════════════╝
     ^                                      │
     └──────────────────────────────────────┘

代码看起来像这样的：

var TodoActions = Reflux.createActions([
    'addItem'
]);

var TodoStore = Reflux.createStore({
    items: [1,2],listenables: [TodoActions],onAddItem: function (model) {
        $.post('/server/add',{data: model},function (data) {
            this.items.unshift(data);
            this.trigger(this.items);
        });
    }
});


var TodoComponent = React.createClass({
    mixins: [Reflux.listenTo(TodoStore,'onStatusChange')],getinitialState: function () {
        return {list: []};
    },onStatusChange: function () {
        this.setState({list: TodoStore.items});
    },render: return (
            <div>
                {this.state.list.map(function (item) {
                    return <p>{item}</p>
                })}
            </div>
        )
    }
});


React.render(<TodoComponent />,document.getElementById('container'));

同React Flux比较

相同点

  • 有actions
  • 有stores
  • 单向数据流

不同点

  • 通过内部拓展actions的行为，移除了单例的dispatcher
  • stores可以监听actions的行为，无需进行冗杂的switch判断
  • stores可以相互监听，可以进行进一步的数据聚合操作，类似于，map/reduce
  • waitFor被连续和平行的数据流所替代

创建Action

var statusUpdate = Reflux.createAction(options);

返回值是一个函数，调用这个函数就会触发相应的事件，在store中监听这个函数，并作相应的处理

var addItem = Reflux.createAction();

var TodoStore = Reflux.createStore({
    init: this.listenTo(addItem,152)">'addItem');
    },addItem: function (model) {
        console.log(model);
    }
});

addItem({name: 'xxx'});

创建多个Action

var TodoActions = Reflux.createActions([
    'addItem',152)">'deleteItem'
]);

store监听actions的行为：

'deleteItem'
]);

this.listenTo(TodoActions.addItem,152)">'addItem');
        this.listenTo(TodoActions.deleteItem,152)">'deleteItem');
    },0)">function (model) {
       console.log(model)
    },deleteItem:function(model){
        console.log(model);
    }
});

TodoActions.addItem({name:'xxx'});
TodoActions.deleteItem({name:'yyy'});

异步Action

真实的应用场景中，几乎所有的操作都会向后端请求，而这些操作都是异步的，Reflux也提供了相应的Promise接口

var getAll = Reflux.createAction({asyncResult:true});

例如获取全部数据：

var getAll = Reflux.createAction({asyncResult: true});

this.listenTo(getAll,152)">'getAll');
    },getAll: function (model) {
        $.get('/all',0)">function (data) {
            if (data) {
                getAll.completed(data);
            } else {
                getAll.Failed(data);
            }

        });
    }
});

getAll({name: 'xxx'})
    .then(function (data) {
        console.log(data);
    })
    .catch(function (err) {
        throw err;
    });

Action hooks

Reflux为每个action都提供了两个hook方法

  • preEmit(params)，action emit之前调用，参数是action传递过来的，返回值会传递给shouldEmit
  • shouldEmit(params) action emit之前调用，参数默认是action传递，如果preEmit有返回值，则是preEmit返回值，返回值决定是否emit

情景一：

var addItem = Reflux.createAction({
    preEmit: function (params) {
        console.log('preEmit:' + params);           
    },shouldEmit: 'shouldEmit:' + params);           
    }
});

'addItem:' + params);
    }
});

addItem('xxx');

控制台打印
$ preEmit:xxx
$ shouldEmit:xxx

情景二：

'preEmit:' + params);
        return 324;
    },152)">'shouldEmit:' + params);
        return true;
    }
});

'xxx');

控制台打印
$ preEmit:xxx
$ shouldEmit:324
$ addItem:324

注意几个返回值和参数的关系

Action Methods

当需要给所有的action添加公用方法时，可以这么干：

Reflux.ActionMethods.print = function (str) {
    console.log(str);
};

'addItem:' + params);
    }
});

addItem.print('xxx');

trigger、triggerAsync和triggerPromise

直接调用addItem()实际上是调用trigger或者triggerAsync或者triggerPromise，它们区别在于

var addItem = Reflux.createAction(); addItem();                 #默认调用triggerAsync，相当于addItem.triggerAsync()
var addItem = Reflux.createAction({sync:true});addItem();       #默认调用trigger，相当于addItem.trigger()
var addItem = Reflux.createAction({asyncResult:true});addItem();#默认调用triggerPromise，相当于addItem.triggerPromise()

trigger和triggerAsync区别在于：

triggerAsync = setTimeout(function () {
    trigger()
},152)">0);

trigger和triggerPromise区别在于，triggerPromise的返回值是promise

创建Store

Store可以响应Action的行为，并同服务器交互。

监听单个Action

在init方法中添加监听处理

'xxx'});

监听多个Action

作死写法

console.log(model);
    },deleteItem: console.log(model);
    }
});

TodoActions.addItem({name: 'xxx'});
TodoActions.deleteItem({name: 'yyy'});

两个action的时候在init里写了两遍监听处理方法，如果有十个甚至多个的话，写起来就像这样的：

'item1',152)">'item2',152)">'item3',152)">'item4',152)">'item5',152)">'item6',152)">'item7',152)">'item8',152)">'item9',152)">'item10'
]);

this.listenTo(TodoActions.item1,152)">'item1');
        this.listenTo(TodoActions.item2,152)">'item2');
        this.listenTo(TodoActions.item3,152)">'item3');
        this.listenTo(TodoActions.item4,152)">'item4');
        this.listenTo(TodoActions.item5,152)">'item5');
        this.listenTo(TodoActions.item6,152)">'item6');
        this.listenTo(TodoActions.item7,152)">'item7');
        this.listenTo(TodoActions.item8,152)">'item8');
        this.listenTo(TodoActions.item9,152)">'item9');
        this.listenTo(TodoActions.item10,152)">'item10');

    },item1: console.log(model);
    }
});

TodoActions.item1({name: 'xxx'});
TodoActions.item2({name: 'yyy'});

listenToMany

还好Reflux给我们提供了listenToMany方法，避免重复劳动：

this.listenToMany(TodoActions);
    },onItem1:  处理方法只需让action的标识首字母大写并加上on就可以了。
 

 
 
标识如果首字母大写就会识别不了，例如将上面的item1改成Itme1。这坑爹的！
 

 

 listenables
 

var TodoStore = Reflux.createStore({
    listenables: [TodoActions],sans-serif; font-size:14px; line-height:22.4px"> 一般我们写真实应用的时候都应该采用这种写法！！！
 

 Store Methods
 

 拓展Store的公用方法有两种方式。
 

 方式一
 

Reflux.StoreMethods.print = console.log(model);
    }
});

TodoStore.print('rrr');
 

 方式二
 

var Mixins = {
    print: function (str) {
        console.log(str);
    }
}

var TodoStore = Reflux.createStore({
    mixins: [Mixins],init: 'rrr');
 

 同组件结合
 

 前面说了，Action、Store和组件这三者是通过事件机制响应变化的，构建组件的时候首先需要监听Store的状态。
 先定义Action和Store
 

'getAll'
]);

2,152)">3],onGetAll: this.trigger(this.items);
    }
});
 

 基本
 

var TodoComponent = React.createClass({
    getinitialState: function (list) {
        this.setState({list: list});
    },componentDidMount: function () {
        this.unsubscribe = TodoStore.listen(this.onStatusChange);
        TodoActions.getAll();
    },componentwillUnmount: function () {
        this.unsubscribe();
    },0)">return <p>{item}</p>
                })}
            </div>
        )
    }
});    
React.render(<TodoComponent />,152)">'container'));
 

 这里有两点需要注意：
 

     
 
  • 当组件的生命周期结束时需要解除对Store的监听
    •  
 
  • 当Store调用trigger时，才会执行onStatusChange函数，所以每次Store更新时，需要手动调用trigger函数
    •  

 

 Mixins
 

var TodoComponent = React.createClass({
    mixins: [Reflux.ListenerMixin],0)">return <p>{item}</p>
                })}
            </div>
        )
    }
});
React.render(<TodoComponent />,152)">'container'));
 

 Reflux.listenTo
 

function () {
        TodoActions.getAll();
    },152)">'container'));
 

 Reflux.connect
 

var TodoComponent = React.createClass({
    mixins: [Reflux.connect(TodoStore,152)">'list')],sans-serif; font-size:14px; line-height:22.4px"> 数据会自动更新到state的list当中。
 

 Reflux.connectFilter
 

var TodoComponent = React.createClass({
    mixins: [Reflux.connectFilter(TodoStore,152)">'list',0)">function (list) {
        return list.filter(function (item) {
            return item > 1;
        });
    })],sans-serif; font-size:14px; line-height:22.4px"> 对数据加了一层过滤器。
 

 
 
以上便Component同Store交互的内容，大家可以根据实际情况选择不同的写法。
 

 

 小结
 

 我这人喜欢拿代码来表述思想。
 

'getAll',152)">'deleteItem',152)">'updateItem'
]);

function () {
        $.get(function (data) {
            this.items = data;
            this.trigger(this.items);
        }.bind(this));
    },152)">'/add',model,0)">function (data) {
            this.items.unshift(data);
            this.trigger(this.items);
        }.bind(this));
    },onDeleteItem: function (model,index) {
        $.post('/delete',0)">function (data) {
            this.items.splice(index,152)">1);
            this.trigger(this.items);
        }.bind(this));
    },onUpdateItem: '/update',0)">function (data) {
            this.items[index] = data;
            this.trigger(this.items);
        }.bind(this));
    }
});


function(item){
                    return <TodoItem data={item}/>
                })}
            </div>
        )
    }
});

var TodoItem = React.createClass({
    componentDidMount: function (model) {
        TodoActions.addItem(model);
    },handleDelete: odoActions.deleteItem(model,index);
    },handleUpdate: function (model) {
        TodoActions.updateItem(model);
    },0)">var item=this.props.data;
        return (
            <div>
                <p>{item.name}</p>
                <p>{item.email}</p>
                <p>/*操作按钮*/</p>
            </div>
        )
    }
});
React.render(<TodoComponent />,sans-serif; font-size:14px; line-height:22.4px"> 实际情况远比这复杂，只是提供一个思路供大家参考。
 

 
 

 长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”，带你探索前端的奥秘。
 

 
 

 

                
                                 
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

react初探（二）之父子组件通信、封装公共组件
一、前言 在组件方面react和Vue一样的，核心思想玩的就是组件，下面举两个组件常用的情景。 场景一：假如我们现在有一个页面包含表格以及多个弹框，这种时候如果将这个页面的业务代码写在一个组件中，那么这一块的代码会看着非常恶心。如果这个时候我们将这个页面的表格以及弹框这些单独的模块分别写成组件的形式
rematch：当你受不了redux繁琐写法的时候，是时候了解一波rematch了
前言： 前段时间学习完react后，刚好就接到公司一个react项目的迭代，顺便巩固一下前段时间的学习成果。项目使用的是redux+react-router，将所有的数据都放在redux中，异步处理数据使用redux-saga。由于是迭代项目，所以代码风格还是沿用之前项目的写法，将所有的数据都放在r
react初探（一）之JSX、状态（state）管理、条件渲染、事件处理
前言： 最近收到组长通知我们项目组后面新开的项目准备统一技术栈为react，目前我的情况是三大框架只会angular和Vue。在实际项目中只使用过一次angular5，其余项目都是使用Vue写的。写篇博客记录一下一些项目中经常使用的技巧在Vue和react中不同的实现方法。 使用JSX指定属性值和嵌
react 学习11高阶组件
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如果组件之中有复用的代码，需要重新创建一个父类，父类中存储公共代码，返回子类，同时把公用属性...
react 学习(四) 批量更新及合成事件
我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 re...
react 学习(二) 实现类和函数式组件
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层，一个是调...
react 学习12实现 cloneElement
react 本身提供了克隆组件的方法，但是平时开发中可能很少使用，可能是不了解。我公司的项目就没有使用，但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
实现简版 react 状态管理器 mobx
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接触 react 就一直使用 mobx 库，上手简单不复杂。
mini react-window(一) 实现固定高度虚拟滚动
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。但是对于大量的列表渲染，特别像有实时数据...
react 学习(六) 函数组件实例及类组件生命周期
本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们...
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native