資訊專欄INFORMATION COLUMN
摘要：簡介創建的函數，返回一個對象，包含等方法合并多個中間件處理，在實際的前調用一系列中間件，類似于綁定和函數式編程中常見的方法，介紹官方提供的綁定庫。
前言
在學習了React之后， 緊跟著而來的就是Redux了~
在系統性的學習一個東西的時候， 了解其背景、設計以及解決了什么問題都是非常必要的。
接下來記錄的是， 我個人在學習Redux時的一些雜七雜八~
https://www.zhihu.com/questio...
介紹先從官方的一句介紹看起：
Redux is a predictable state container for JavaScript apps. （Redux是Javascript應用程序的可預測狀態容器。）
當然，假如你在這之前并沒有接觸過相關的狀態管理庫或者框架， 看到這句話時是非常的懵逼的， 不過可以帶著這句話來一步步探索~
背景隨著Javascript單頁面應用開發日趨復雜，JavaScript 需要管理比任何時候都要多的 state （狀態）。 這些 state 可能包括服務器響應、緩存數據、本地生成尚未持久化到服務器的數據，也包括 UI 狀態，如激活的路由，被選中的標簽，是否顯示加載動效或者分頁器等等。管理不斷變化的 state 非常困難。如果一個 model 的變化會引起另一個 model 變化，那么當 view 變化時，就可能引起對應 model 以及另一個 model 的變化，依次地，可能會引起另一個 view 的變化。直至你搞不清楚到底發生了什么。 -- Redux文檔
上面這一大段引用概況起來就是一句話， state（狀態）在什么時候什么地方，因為什么而變化成了一個不受控制的過程。（這不能忍，狀態如果無法預測以及控制）
那么Redux就是試圖讓state的變化變得可預測。這些限制條件反映在 Redux 的三大原則中。
核心概念1.Redux使用普通的對象來描述state，這個對象就是Modal。
2.要想更新 state 中的數據，你需要發起一個 action。Action 就是一個普通 JavaScript 對象用來描述發生了什么。
3.為了把 action 和 state 串起來，開發一些函數，這就是 reducer。reducer 只是一個接收 state 和 action，并返回新的 state 的函數。
只有一個state樹。
state是只讀的，只能通過action改變。
reducer是純函數，沒有副作用。
了解到這些后，其實已經多少能明白Redux is a predictable state container for JavaScript apps. （Redux是Javascript應用程序的可預測狀態容器。）這句話，為什么是可預測的？ 因為只有一個state樹，并且它是只讀的，而且只能通過action來改變（改變的過程變得清晰可追蹤），并且獲取state（狀態）只能通過reducer，而reducer是一個純函數（此處了解state是重點），沒有副作用，也就意味著我們能知道我們最終得到的state是什么樣的。
api簡介[createStore(reducer, [preloadedState], [enhancer])](https://www.redux.org.cn/docs...
創建store的函數，返回一個對象， 包含getStatedispatchsubscribegetReducerreplaceReducer等方法
combineReducers(reducers)
合并多個reducer
applyMiddleware(...middlewares)
中間件處理，在 實際的dispatch前調用一系列中間件， 類似于koa
bindActionCreators(actionCreators, dispatch)
綁定action和dispatch
compose(...functions)
函數式編程中常見的方法， compose(funcA, funcB, funcC) => compose(funcA(funcB(funcC())))
Redux官方提供的 React 綁定庫。 具有高效且靈活的特性。
動機React是以組件化的形式開發。為了組件的復用以及代碼的清晰，通常我們將組件分為容器組件以及UI組件。
關于容器組件和UI組件，推薦閱讀該文章，而引入了React-redux可以很好的幫助我們分離容器組件和UI組件。
為什么選擇react-reduxreact-redux是官方提供的綁定庫，由redux開發者維護，可以很好的與redux保持同步。
它鼓勵組件分離。react-redux協助我們分離容器組件和UI組件，通過提供API連接store（提供數據）和UI組件，并且使得UI組件不需要知道存在Redux（復用）。
性能優化。雖然React速度很快，但是re-redering是非常消耗性能的，而react-redux的內部做了許多性能優化。
社區支持，因為是官方指定的綁定庫，所以擁有大量的使用者，社區活躍度高，問題也容易解決。
api簡介使組件層級中的 connect() 方法都能夠獲得 Redux store。
store: 應用程序中唯一的 Redux store 對象
connect(mapStateToProps, mapDispatchToProps, mergeProps, options)
mapStateToProps(state, [ownProps]): stateProps: 映射state作為UI組件的props
mapDispatchToProps(dispatch, [ownProps]): dispatchProps： 映射dispatch作為UI組件的props
mergeProps(stateProps, dispatchProps, ownProps): props: 如果指定這個函數， 即合并mapStateToPropsmapDIspatchToPropsoweProps作為UI組件的props
options: 定制 connector 的行為
Redux存在的問題與其說缺點，不如說是Redux的優勢而造成的不可避免的劣勢，問題應該辯證地看~
純凈。Redux只支持同步，讓狀態可預測，方便測試。 但不處理異步、副作用的情況，而把這個丟給了其他中間件，諸如redux-thunkredux-promiseredux-saga等等，選擇多也容易造成混亂~
啰嗦。那么寫過Redux的人，都知道actionreducer以及你的業務代碼非常啰嗦，模板代碼非常多。但是~，這也是為了讓數據的流動清晰明了。
性能。粗暴地、級聯式刷新視圖（使用react-redux優化)。
分型。原生 Redux-react 沒有分形結構，中心化 store；
Redux的最佳實踐 vuex（dva）事實上，如果用過vuex或者dva的話， 個人覺得還是會比較偏向于這種用法。比起Redux的啰嗦，dva幫忙簡化了很多步驟。具體的實現后續補充~
這里先補充一點，vuex不是immutable，所以對于時間旅行這種業務不太友好。
Redux的實現淺析 前言Redux的代碼相對比較簡單，容易理解， 源碼的解讀推薦看這篇文章， 本段主要是對代碼里一些個人覺得比較有意思的點進行分析~
createStore在這里看出，redux即使是在內部，也是函數式編程~
當我們傳入了一個enhancer函數（即中間件），會把createStore本身當成參數傳給enhancer然后返回一個新的函數來調用 即 fn => fn
暴露出的subscribe函數也是挺有意思的， 首先是isSubscribed這個變量， 其實就是一種非常基礎的閉包使用，
然后是每次訂閱或者取消訂閱的時候，都會在dispatch之前保存一次快照， 然后當前的dispatch用的是上一份快照，而下一個dispatch則是使用當前這一份的快照
非常簡潔的寫出了函數式編程的一個常用函數(...args) => f(g(h(...args))).
combineReducer可以看出，每一次action都會重新計算所有的reducer~ 但如果不是非常巨大的state樹，并且拆分了很多模塊，個人認為其實影響不大
bindActionCreator和applyMiddleware相對容易理解， 這里就不贅述啦
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101589.html
摘要：介紹快速開始是的官方綁定庫。通常你可以以下面這種方式調用方法基礎教程為了進一步了解如何實際使用，我們將一步一步創建一個一個實例跳轉到 介紹 快速開始 React-Redux是Redux的官方React綁定庫。它能夠使你的React組件從Redux store中讀取數據，并且向store分發actions以更新數據 安裝 在你的React app中使用React-Redux： npm i...
摘要：手挽手帶你學入門四檔用人話教你，理解架構，以及運用在中。學完這一章，你就可以開始自己的項目了。結合搭建基礎環境我們上一章講過了的原理，內部是有一個的，只有才可以控制它變化。 手挽手帶你學React入門四檔,用人話教你react-redux，理解redux架構，以及運用在react中。學完這一章，你就可以開始自己的react項目了。 視頻教程 上一篇我們自己實現了Redux，這一篇我們來...
摘要：應用中唯一的狀態應用的子組件例子方法來看下函數到底是如何將和組件聯系在一起的，注意到文檔中有這樣的一句話并不會改變它連接的組件，而是提供一個經過包裹的組件。 關于React-redux Redux是React全家桶的重要一員，之前在知乎上也看到類似的提問：該如何通俗易懂的理解Redux? Redux是JavaScript的狀態容器，Redux的概念簡單明了： 1. 應用中所有的狀...
摘要：簡介是一個狀態管理的庫，由基礎上開發出來，與的主要區別是只有一個，關于，后文會詳述。這個函數接受四個參數，它們分別是，，和。之前在注冊頁面，如果沒有滿足相關條件，則觸發的行為。具體定義了項目中觸發的行為類別，通過屬性來區別于不同的行為。 redux簡介 redux是一個js狀態管理的庫，由flux基礎上開發出來，與flux的主要區別是只有一個store，關于store，后文會詳述。在各...
摘要：項目地址下載完項目然后即可基于的項目，主要是為了學習實戰。數據都是固定的，從餓了么接口臨時抓的，模擬了一個的異步數據延遲，感謝餓了么。詳細信息可以看上面的官方文檔，我這里就簡單說一下我這個項目的應用。 react-ele-webapp 項目地址 ：https://github.com/kliuj/reac... run 下載完項目npm install然后npm run dev 即可 ...
閱讀 2788·2023-04-26 01:47
閱讀 3597·2023-04-25 23:45
閱讀 2472·2021-10-13 09:39
閱讀 612·2021-10-09 09:44
閱讀 1799·2021-09-22 15:59
閱讀 2770·2021-09-13 10:33
閱讀 1722·2021-09-03 10:30
閱讀 662·2019-08-30 15:53
