React和Redux的教程已經汗牛充棟,這里也不想對著問題繼續糾結.對于基本的數據流程理解了以后,需要考慮到怎么來改進實際的開發過程.
Redux的文件夾種類很多,紛繁蕪雜,其實目的只有一個:分離程序設計的關注點 初學者可能對這個很頭疼.經過一段時間學習以后,你可能就會覺得這種文件夾的分類是非常的舒服,但是我覺得仍然有改進余地.例如可以在獨立邏輯處理的文件中引入命名空間的做法:
針對登錄的邏輯,包括展示層,邏輯處理層,可以做如下處理
整個數據的流程是UI component(action)->Redux's store(actionType)->change state 結束了.我開始以為還有從state到UI component的流動,實際是沒有的. UI component對于的state是訂閱以及展示的過程,和交互過程實際沒有關系的.

  loging.UI.js //登錄的展示層,實際上React能夠完成的基礎工作就是界面的展示工作
               // 同時為交互操作留有action的地方
  //==========================================================
 //login.UI.js中的提交按鈕觸發登錄操作的action以后,控制權就交到了Redux中
  //由此可以知道關注點發生了分離，但是為了編寫和分析方便,我們仍寫到一起
   //==========================================================
 
   login.action.js  //定義action函數
   login.actionType.js  //定義action的類型
   login.reducer.js    //根據actionType做出state改變的地方
   login.saga.js  //如果使用redux-saga來處理異步操作,添加這個文件
   
   //這樣做與登錄有關的UI和數據處理的邏輯就在一個文件夾里,IDE中打開文件夾操作起來非
   //常高效,例如在webstorm中打開一個文件夾,不要再開很多目錄, 整個登錄的邏輯都在一
   //起,很容易觀察到數據的流向
   
   
      

在上面的流程中我們已經完成了用戶和組件的交互操作.

初學者這里總會有疑問,那么請問如果我登錄了,我怎么把異步獲取的數據傳遞到其他頁面.
這個問題解決辦法有很多,如果你做過web開發就知道,會用cookie和session來做全局存儲.
或者在app開發中使用本地存儲把它保存起來,其實也是全局的存儲方法.

登錄的問題解決了,其他有頁面之間傳值的需求,你還需要借助于路由組件傳遞參數嗎？
盡量不要這么做,其他頁面需要的值，都把他放到Redux中來存儲.
有了Redux，Redux-presist,normalizr,齊活了.有了這幾個東西,Redux的state就變成前端數據庫了.

web開發中模板需要的數據從數據庫中取,Redux的組件中需要的數據也可以同樣操作, 類似 mysql select * from datatable where num>10的操作.
每個組件只需要從state中選出需要的節點就可以了.

觸發state改變的組件再也不用考慮到底還要給多少頁面來傳遞值.需要數據的頁面直接選取就可以了. 這樣做的好處就是,即使不知道到底app的邏輯怎么發展,擴展性都很強.反正東西都在store里，誰需要就自己告訴售貨員需要什么.

實際開發中的初步考慮

分離了關注點,開發中也可以分為兩部分,一部分集中做UI展示,一部分做邏輯處理

異步登錄Redux，Redux-saga的處理方法

如果以登錄的邏輯處理,Redux部分只需要獲取action傳遞用戶登錄信息
所以可以在login.UI.mock.js中放簡單的提交按鈕直接觸發
dispatch(userLoginRequest(user.name,user.password,validationcode))就可以了.

后續的工作就交由Redux和Redux-saga來處理. 控制權轉移到Redux.
這里有程序員集中考慮state的結構和實際的異步操作邏輯.

UI頁面

UI組件現在就是靜態展示作用,React再也不處理和UI展示無關的內容.
可以有程序員專門處理展示組件的編寫

Server端

Server開發落后于手機端開發的時候,可以導入mock-server，結合結構文檔來構造假數據.根據開發環境來切換url就可以.

這樣我們的前端React/Redux/Redux-saga的開發流程就完整了.

**分離關注點,分離關注點 **