React-Reflux流程进阶
上回说到,Reflux将React之间多个组件之间的通信问题解决了,保证了这个应用的数据统一,总结一下就是:
这一章,我们还是拿UserActions和UserStore来举例说明,在我们的项目中,如何更好的使用Reflux。 目前我们的UserActions是这样的: var UserActions = Reflux.createActions({ 'register' : {children:["success","failed"]},'login' : {children:["success",'loginWithToken' : {children : ['success','failed']},'logout' : {children:["success"]},'openLogin' : {children:["success",'currentUser' : {children:["success",'modifyPassword':{children:["success","failed"]} }); init: function() { console.log('UserStore initialized'); /* 需要增加从localStorage读取用户信息的方法来初始化userData */ this.userData = { userId: '',userName: '',loginToken : '',//用户选择rememberme的时候返回 userType: '',userState: '',isLogin: false,hintMessage: '',flag : '' }; /* 获取第三方登录的返回值,并得到当前用户 */ UserActions.currentUser(); /* 可以用下面代码代替 listenables: UserActions, */ this.listenTo(UserActions.login.success,this.onLoginSuccess); this.listenTo(UserActions.login.failed,this.onLoginFailed); this.listenTo(UserActions.register.success,this.onRegisterSuccess); this.listenTo(UserActions.register.failed,this.onRegisterFailed); .... }, 得到用户信息的反馈之后: onGetCurrentUser : function(data){ if(data.Success){ console.log(data); this.setCurrentUser(data); this.userData.flag = 'currentUser'; this.trigger(this.userData); }else{ console.log(data.ErrorMsg); //若未得到当前用户,尝试loginwithtoken this.getTokenToLogin(); } }, flag是我自己定义的一个标记,并不是Reflux的定义,为什么要定义?回头看看UserActions的代码,发现那么多的actions都是调用同一个UserStore,用户登录、注册、三方登录、修改密码等等。监听UserStore的组件相当多,一般涉及到需要当前用户登录才能操作的界面基本上都要监听UserStore,如果不管进行什么操作,这些组件都要听到UserStore数据变化的消息,那不就烦(luan)死(tao)啦。所以,我们针对每一个不同的actions操作返回的结果定义一个flag,在不同的组件监听方法里面判断这次数据的变化是不是我想要听到的,如果不是就不管他。 于是component里面的代码就是这样的: //login.js if(data.flag == 'login' || data.flag == 'currentUser' || data.flag == 'loginToken'){ if(data.hintMessage){ this.handleHint(data.hintMessage); }else{ //登录成功,跳转到account界面 console.log('登录成功'); this.history.pushState(null,'/account'); } } }, handleUserStoreChange : function(userData){ if(userData.isLogin){ if(userData.userType == 1){ //已经是摄影师用户,跳转摄影师信息 this.history.pushState(null,'/account/photographer'); }else{ //普通用户,拿到认证数据再判断认证状态 this.getAuditData(); } }else{ //没有登录转到登录界面 this.history.pushSate(null,'/'); } }, 未完待续,下一篇讲讲Router,其实我更想讲讲react-native,算了,这两天搞的头大,直接上swift了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |