React-Reflux流程進階

上回說到，Reflux將React之間多個組件之間的通訊問題解決了，保證了這個應用的數據統一，總結一下就是：

1. Component是一個界面渲染角色，會有本身的狀態，能夠傳遞屬性

2. Actions是用戶操做的接口，它並無Controller那樣強大的控制能力，個人理解是定義了一個操做的內部RESTFUL操做規範，每個涉及到數據的操做，都必須經過actions，這樣對於之後複雜的流程和數據模型，咱們內部不用把界面寫得亂七八糟。

3. Store是存儲數據的地方，也就是MVC中的Modal，可是不少邏輯咱們又不得不放在Store裏面，因此Store更像Controller。Store的數據一旦變化，它會通知各個監聽他的組件對象，從新對界面進行渲染。

這一章，咱們仍是拿UserActions和UserStore來舉例說明，在咱們的項目中，如何更好的使用Reflux。

目前咱們的UserActions是這樣的：

var UserActions = Reflux.createActions({

'register' : {children:["success","failed"]},
  'login' : {children:["success","failed"]},
'loginWithToken' : {children : ['success','failed']},
  'logout' : {children:["success"]},
'openLogin' : {children:["success","failed"]},
'currentUser' : {children:["success","failed"]},
'modifyPassword':{children:["success","failed"]}

});
看action的命名應該就知道大概的用途了，這裏不細說。咱們的UserStore是這樣初始化的：

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);
....

},
咱們定義了一個userData對象，會存儲當前的用戶信息，若是沒有登陸狀態，isLogin是false。請注意，咱們在UserStore裏面會初始化調用一個UserActions.currentUser().也就是說在頁面一加載的時候，咱們就會調用獲取當前用戶的登陸信息。

獲得用戶信息的反饋以後：

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();
}

},
很容易明白上面的代碼，若是後端返回成功，設置當前用戶，若是後端失敗，嘗試用本地的loginToken登陸。可是注意到了沒有，爲何會有一個flag呢？固然你可能根本沒有注意到。。。。

flag是我本身定義的一個標記，並非Reflux的定義，爲何要定義？回頭看看UserActions的代碼，發現那麼多的actions都是調用同一個UserStore，用戶登陸、註冊、三方登陸、修改密碼等等。監聽UserStore的組件至關多，通常涉及到須要當前用戶登陸才能操做的界面基本上都要監聽UserStore，若是無論進行什麼操做，這些組件都要聽到UserStore數據變化的消息，那不就煩(luan)死(tao)啦。因此，咱們針對每個不一樣的actions操做返回的結果定義一個flag，在不一樣的組件監聽方法裏面判斷此次數據的變化是否是我想要聽到的，若是不是就無論他。

因而component裏面的代碼就是這樣的：

//login.js
handleLoginResult : function(data){

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');
  }
}

},
固然，對於UserStore裏面的信息是很是重要的，因此對於它而言，通常須要登陸才能操做的界面，咱們直接不判斷他是從哪登陸的，只要登陸就行，就不用判斷flag。好比攝影師的編輯頁面是這樣的監聽方法：

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了。