資訊專欄INFORMATION COLUMN
摘要：使得在變化和異步中可預(yù)測(cè)。它是數(shù)據(jù)的唯一來源。指定了應(yīng)用狀態(tài)的變化如何響應(yīng)并發(fā)送到的，只是描述了有事情發(fā)生了這一事實(shí)，并沒有描述應(yīng)用如何更新。更新的函數(shù)稱為，它是一個(gè)純函數(shù)，接受舊的和，返回新的。是和之間的橋梁，是把它們聯(lián)系到一起的對(duì)象。
為什么使用redux
隨著前端單頁面開發(fā)越來越復(fù)雜，javascript需要管理越來越多的狀態(tài)state。如果一個(gè)model的變化引起另一個(gè)model的變化，view的變化，那么當(dāng) view 變化時(shí)，就可能引起對(duì)應(yīng) model 以及另一個(gè) model 的變化，依次地，可能會(huì)引起另一個(gè) view 的變化。直至你搞不清楚到底發(fā)生了什么。state 在什么時(shí)候，由于什么原因，如何變化已然不受控制。 當(dāng)系統(tǒng)變得錯(cuò)綜復(fù)雜的時(shí)候，想重現(xiàn)問題或者添加新功能就會(huì)變得舉步維艱。Redux使得state在變化和異步中可預(yù)測(cè)。
在使用redux的應(yīng)用中，所有的stae都以一個(gè)對(duì)象樹的形式存儲(chǔ)在單一的store中，惟一改變 state 的辦法是觸發(fā) action，action 如何改變 state 樹，需要編寫 reducers。
Action 把數(shù)據(jù)從應(yīng)用傳到 store 。它是 store 數(shù)據(jù)的唯一來源。通過 store.dispatch() 將 action 傳到 store。
Reducers 指定了應(yīng)用狀態(tài)的變化如何響應(yīng) actions 并發(fā)送到 store 的，actions 只是描述了有事情發(fā)生了這一事實(shí)，并沒有描述應(yīng)用如何更新 state。更新state的函數(shù)稱為reducer，它是一個(gè)純函數(shù)，接受舊的state和action，返回新的state。reducer必須是一個(gè)純函數(shù)，不能進(jìn)行如下操作：
修改傳入的參數(shù)
執(zhí)行有副作用的操作，如 API 請(qǐng)求和路由跳轉(zhuǎn)
調(diào)用非純函數(shù)，如 Date.now() 或 Math.random()
Redux提供了combineReducers函數(shù)，該函數(shù)接受一個(gè)對(duì)象，作用是生成一個(gè)函數(shù)，這個(gè)函數(shù)來調(diào)用你的一系列 reducer，每個(gè) reducer 根據(jù)它們的 key 來篩選出 state 中的一部分?jǐn)?shù)據(jù)并處理，然后這個(gè)生成的函數(shù)再將所有 reducer 的結(jié)果合并成一個(gè)大的對(duì)象。沒有任何魔法。正如其他 reducers，如果 combineReducers() 中包含的所有 reducers 都沒有更改 state，那么也就不會(huì)創(chuàng)建一個(gè)新的對(duì)象。
Store 是action和reader之間的橋梁，是把它們聯(lián)系到一起的對(duì)象。Redux 應(yīng)用只有一個(gè)單一的 store
Store有以下功能：
維持應(yīng)用的state
提供 getState() 方法獲取 state
提供 dispatch(action) 方法更新 state
通過 subscribe(listener) 注冊(cè)監(jiān)聽器
通過 subscribe(listener) 返回的函數(shù)注銷監(jiān)聽器
使用createStore創(chuàng)建一個(gè)Store
const Store = createStore(reducers,other)Redux的數(shù)據(jù)流
Redux是單向數(shù)據(jù)流。單向數(shù)據(jù)流的好處：意味著應(yīng)用中所有的數(shù)據(jù)都遵循相同的生命周期，這樣可以讓應(yīng)用變得更加可預(yù)測(cè)且容易理解。同時(shí)也鼓勵(lì)做數(shù)據(jù)范式化，這樣可以避免使用多個(gè)且獨(dú)立的無法相互引用的重復(fù)數(shù)據(jù)。
調(diào)用 store.dispatch(action)，觸發(fā)action動(dòng)作
Redux store 調(diào)用傳入的 reducer 函數(shù)，Store 會(huì)把兩個(gè)參數(shù)傳入 reducer： 當(dāng)前的 state 樹和 action。
根 reducer 應(yīng)該把多個(gè)子 reducer 輸出合并成一個(gè)單一的 state 樹。
Redux store 保存了根 reducer 返回的完整 state 樹
Redux搭配react使用使用react-redux。在react-redux的使用中，關(guān)注兩個(gè)方法：Provider和connect
Provider把store放到context里，所有的子元素可以直接取到store，本質(zhì)上 Provider 就是給 connect 提供 store 用的。
connect 是一個(gè)高階組件，接受一個(gè)組件 WrappedComponent 作為參數(shù)，負(fù)責(zé)鏈接組件，把給到redux里的數(shù)據(jù)放到組件的屬性里。主要有兩個(gè)作用：1. 負(fù)責(zé)接受一個(gè)組件，把state里的一些數(shù)據(jù)放進(jìn)去，返回一個(gè)組件；2. 數(shù)據(jù)變化的時(shí)候，能夠通知組件。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/95730.html
摘要：應(yīng)用中唯一的狀態(tài)應(yīng)用的子組件例子方法來看下函數(shù)到底是如何將和組件聯(lián)系在一起的，注意到文檔中有這樣的一句話并不會(huì)改變它連接的組件，而是提供一個(gè)經(jīng)過包裹的組件。 關(guān)于React-redux Redux是React全家桶的重要一員，之前在知乎上也看到類似的提問：該如何通俗易懂的理解Redux? Redux是JavaScript的狀態(tài)容器，Redux的概念簡(jiǎn)單明了： 1. 應(yīng)用中所有的狀...
摘要：和的結(jié)合簡(jiǎn)述相信很多前端開發(fā)者都聽說或使用過，我曾寫過一篇關(guān)于快速理解的文章，雖說是快速理解，但實(shí)際上更應(yīng)該叫做復(fù)習(xí)吧。它通過高階函數(shù)，純函數(shù)使我們?cè)诰帉懡M件時(shí)完全不用接觸相關(guān)內(nèi)容，只通過將組件和數(shù)據(jù)連接起來即可。 react-redux react和redux的結(jié)合 簡(jiǎn)述 相信很多前端開發(fā)者都聽說或使用過react-redux，我曾寫過一篇關(guān)于快速理解redux的文章，雖說是快...
摘要：編輯器頂層組件不就了嗎這就是。官方提供的綁定庫。具有高效且靈活的特性。在的中，可以使用或者等來監(jiān)聽某個(gè)，當(dāng)某個(gè)觸發(fā)后，可以使用發(fā)起異步操作，操作完成后使用函數(shù)觸發(fā)，同步更新，從而完成整個(gè)的更新。 不就ok了嗎？這就是 react-redux。Redux 官方提供的 React 綁定庫。 具有高效且靈活的特性。 React Redux 將組件區(qū)分為 容器組件 和 UI 組件 前者會(huì)處理邏輯...
摘要：為了提高自己的學(xué)習(xí)效率，避免做一些無用的工作，我也決定以后無論是工作還是學(xué)習(xí)一定要養(yǎng)成定時(shí)總結(jié)的習(xí)慣，而且也要用文字記錄下來，這樣可以時(shí)常復(fù)習(xí)，理清邏輯，加深印象。一種解決方法是將對(duì)象作為參數(shù)，傳入容器組件。 前言 最近一直在學(xué)習(xí)react技術(shù)棧，相關(guān)的理論和概念基本都了解了，之前也用reactjs寫了幾個(gè)demo，切身體會(huì)到了函數(shù)式編程和組件化開發(fā)的強(qiáng)大之處，但因各種主客觀原因，事后...
手挽手帶你學(xué)React入門四檔,用人話教你react-redux，理解redux架構(gòu)，以及運(yùn)用在react中。學(xué)完這一章，你就可以開始自己的react項(xiàng)目了。 之前在思否看到過某個(gè)大神的redux搭建 忘記了大神的名字 這里只記得內(nèi)容了 憑借記憶和當(dāng)時(shí)的學(xué)習(xí)路線寫下本文 隔空感謝 本人學(xué)習(xí)react-redux的時(shí)候遇到了很多坎，特別是不理解為什么這么用，這是什么東西，用來做什么。加上各種名詞讓人...
閱讀 914·2019-08-30 15:54
閱讀 3394·2019-08-29 15:33
閱讀 2768·2019-08-29 13:48
閱讀 1377·2019-08-26 18:26
閱讀 3386·2019-08-26 13:55
閱讀 1576·2019-08-26 10:45
閱讀 1237·2019-08-26 10:19
閱讀 362·2019-08-26 10:16
