Redux使用探究

Chao 發布于2019-08-22 10:39 / 913人閱讀

摘要：動機如今用或者開發單頁應用越來越普遍。可能散落在各處。使用純函數來執行修改為了描述如何改變，你需要編寫。在實際的項目中，你還需要使用綁定庫如。

動機

如今用React或者vue開發單頁應用越來越普遍。當項目越來越大，管理不斷變化的state越來越困難。可能散落在各處。需要一個統一的容器來管理各種state。
Redux 是 JavaScript 狀態容器。它和react和vue無直接關系。只是剛好兩者可以結合起來發揮不錯的。

三大原則

Redux 可以用這三個基本原則來描述：

單一數據源

整個應用的 state 被儲存在一棵 object tree 中，并且這個 object tree 只存在于唯一一個 store 中

State 是只讀的

惟一改變 state 的方法就是觸發 action，action 是一個用于描述已發生事件的普通對象。

使用純函數來執行修改

為了描述 action 如何改變 state tree ，你需要編寫 reducers。

Reducer 只是一些純函數，它接收先前的 state 和 action，并返回新的 state。剛開始你可以只有一個 reducer，隨著應用變大，你可以把它拆成多個小的 reducers，分別獨立地操作 state tree 的不同部分，因為 reducer 只是函數，你可以控制它們被調用的順序，傳入附加數據，甚至編寫可復用的 reducer 來處理一些通用任務，如分頁器。

API 文檔

Redux 的 API 非常少。

記住，Redux 只關心如何管理 state。在實際的項目中，你還需要使用 UI 綁定庫如 react-redux。實際上就是幫你處理了state變化時的監聽

createStore

產生store

combineReducers

把多個小reducers組合成一個reducer

applyMiddleware(...middlewares)

action中間件

bindActionCreators

產生可以不用dispatch的action (感覺用處并不大)

compose

把多個中間件組合在一起

GPU云服務器云服務器探究關于webrtc直播的探究 Redux redux源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/91004.html

React技術棧實現XXX點評App demo

摘要：項目的架構也是最近在各種探討研究。還求大神多指點項目技術總結技術棧項目結構探究初體驗關于項目中的配置說明項目簡單說明開發這一套，我個人的理解是體現的是代碼分層職責分離的編程思想邏輯與視圖嚴格區分。前端依舊使用技術棧完成。項目地址：https://github.com/Nealyang/R...技術棧：react、react-router4.x 、 react-redux 、 webp...

wslongchen 2019-08-21 16:24 評論0 收藏0
redux中間件探秘

摘要：接下來我們來看看源碼中的模塊是怎么應用中間件的。如何實現中間件操作的。新的會從第一個中間件開始觸發，這樣，在我們調用的時候，就會將中間件走一遍了。函數如果存在多個中間件，直接使用方法將各個中間件嵌套起來。從redux-thunk引出思考在使用redux-thunk進行異步action書寫的時候，我經常好奇redux到底如何運作，讓asyncAction成為可能為了探究，我們必須看...

Jeff 2019-08-20 18:26 評論0 收藏0
2017-06-27 前端日報

摘要：前端日報精選漫談函數式編程一十年蹤跡的博客前端每周清單的優勢與劣勢有望超越在嵌入式及物聯網的應用現狀進階系列高階組件詳解一前端之路譯如何充分利用控制臺掘金程序猿升級攻略眾成翻譯中文譯如何充分利用控制臺掘金前端從強制開啟壓縮探 2017-06-27 前端日報精選漫談 JS 函數式編程（一） - 十年蹤跡的博客前端每周清單： Vue的優勢與劣勢；Node.js有望超越Java；JS在嵌...

Eidesen 2019-08-20 17:35 評論0 收藏0
解析Twitter前端架構學習復雜場景數據設計

摘要：總結本文分析了在采用架構下的數據設計結構，在一個復雜的場景下，希望引起讀者對能有一個更深入的認識。前幾天刷Twitter，發現Nicolas（Engineering at @twitter. Technical Lead for Twitter Lite）發布了這么一條推文： showImg(https://segmentfault.com/img/remote/1460000009...

csRyan 2019-08-20 16:08 評論0 收藏0