new-Xadmin

張雪蓮發表於2019-03-05

github.com/sshwsfc/xad…

純前端框架,使用React和Redux套餐,保持了xadmin原有的高擴充套件性和高定製性,可以輕鬆定製出一整套管理後臺。後端資料全部採用API方式獲取,您可以定製自己的API Client對接您的後臺系統。

redux-saga

redux資料流:

new-Xadmin

Action 就是一個普通 JavaScript 物件,用來描述發生了什麼

Store呼叫傳入的reducer函式。store會把兩個引數傳入 redux: 當前的 state 樹和 action

Reducer 接收先前的 state 和 action,根據action行為,執行相應的邏輯操作,更新並返回新的 state 

Store就是把它們聯絡到一起的物件。Store 有以下職責:

middleware 只是包裝了store的dispatch方法。

你可以利用 Redux middleware 來進行日誌記錄、建立崩潰報告、呼叫非同步介面或者路由等等。複製程式碼

中介軟體和非同步操作

redux + Middleware資料流:

new-Xadmin

redux-saga管理 Redux 應用非同步操作的中介軟體,middleware 在非同步action到達 reducer 前處理它們

  • Reducers 負責處理 action 的 state 更新

  • Sagas 負責協調那些複雜或非同步的操作

Sagas是通過ES6中的generator函式和yield關鍵字來以同步的方式實現非同步操作

redux-saga 使用 Effect 諸如 call 和 put,與高階 API 如 takeEvery 相結合,讓我們實現與 redux-thunk 同樣的東西, 但又有額外的易於測試的好處。 在「高階」一節,你會遇到一些更強大的 Effect,包括阻塞、非阻塞呼叫,取消、等待、race等操作方便隔離並執行非同步操作,並易於測試讓你可以表達更復雜的控制流。