對redux和react-redux的理解和總結（一）

skinner 發(fā)布于2019-08-22 18:19 / 2798人閱讀

摘要：使得在變化和異步中可預測。它是數據的唯一來源。指定了應用狀態(tài)的變化如何響應并發(fā)送到的，只是描述了有事情發(fā)生了這一事實，并沒有描述應用如何更新。更新的函數稱為，它是一個純函數，接受舊的和，返回新的。是和之間的橋梁，是把它們聯(lián)系到一起的對象。

為什么使用redux

隨著前端單頁面開發(fā)越來越復雜，javascript需要管理越來越多的狀態(tài)state。如果一個model的變化引起另一個model的變化，view的變化，那么當 view 變化時，就可能引起對應 model 以及另一個 model 的變化，依次地，可能會引起另一個 view 的變化。直至你搞不清楚到底發(fā)生了什么。state 在什么時候，由于什么原因，如何變化已然不受控制。當系統(tǒng)變得錯綜復雜的時候，想重現問題或者添加新功能就會變得舉步維艱。Redux使得state在變化和異步中可預測。

在使用redux的應用中，所有的stae都以一個對象樹的形式存儲在單一的store中，惟一改變 state 的辦法是觸發(fā) action，action 如何改變 state 樹，需要編寫 reducers。

Action 把數據從應用傳到 store 。它是 store 數據的唯一來源。通過 store.dispatch() 將 action 傳到 store。
Reducers 指定了應用狀態(tài)的變化如何響應 actions 并發(fā)送到 store 的，actions 只是描述了有事情發(fā)生了這一事實，并沒有描述應用如何更新 state。更新state的函數稱為reducer，它是一個純函數，接受舊的state和action，返回新的state。reducer必須是一個純函數，不能進行如下操作：

修改傳入的參數

執(zhí)行有副作用的操作，如 API 請求和路由跳轉

調用非純函數，如 Date.now() 或 Math.random()

Redux提供了combineReducers函數，該函數接受一個對象，作用是生成一個函數，這個函數來調用你的一系列 reducer，每個 reducer 根據它們的 key 來篩選出 state 中的一部分數據并處理，然后這個生成的函數再將所有 reducer 的結果合并成一個大的對象。沒有任何魔法。正如其他 reducers，如果 combineReducers() 中包含的所有 reducers 都沒有更改 state，那么也就不會創(chuàng)建一個新的對象。

Store 是action和reader之間的橋梁，是把它們聯(lián)系到一起的對象。Redux 應用只有一個單一的 store
Store有以下功能：

維持應用的state

提供 getState() 方法獲取 state

提供 dispatch(action) 方法更新 state

通過 subscribe(listener) 注冊監(jiān)聽器

通過 subscribe(listener) 返回的函數注銷監(jiān)聽器

使用createStore創(chuàng)建一個Store

const Store = createStore(reducers,other)

Redux的數據流

Redux是單向數據流。單向數據流的好處：意味著應用中所有的數據都遵循相同的生命周期，這樣可以讓應用變得更加可預測且容易理解。同時也鼓勵做數據范式化，這樣可以避免使用多個且獨立的無法相互引用的重復數據。

調用 store.dispatch(action)，觸發(fā)action動作

Redux store 調用傳入的 reducer 函數，Store 會把兩個參數傳入 reducer：當前的 state 樹和 action。

根 reducer 應該把多個子 reducer 輸出合并成一個單一的 state 樹。

Redux store 保存了根 reducer 返回的完整 state 樹

Redux搭配react使用

使用react-redux。在react-redux的使用中，關注兩個方法：Provider和connect

Provider把store放到context里，所有的子元素可以直接取到store，本質上 Provider 就是給 connect 提供 store 用的。

connect 是一個高階組件，接受一個組件 WrappedComponent 作為參數，負責鏈接組件，把給到redux里的數據放到組件的屬性里。主要有兩個作用：1. 負責接受一個組件，把state里的一些數據放進去，返回一個組件；2. 數據變化的時候，能夠通知組件。

GPU云服務器云服務器 react-redux 云計算和大數據的理解對python的理解談談對php的理解

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

轉載請注明本文地址：http://systransis.cn/yun/95730.html

對React-redux中connect方法的理解

摘要：應用中唯一的狀態(tài)應用的子組件例子方法來看下函數到底是如何將和組件聯(lián)系在一起的，注意到文檔中有這樣的一句話并不會改變它連接的組件，而是提供一個經過包裹的組件。關于React-redux Redux是React全家桶的重要一員，之前在知乎上也看到類似的提問：該如何通俗易懂的理解Redux? Redux是JavaScript的狀態(tài)容器，Redux的概念簡單明了： 1. 應用中所有的狀...

Bryan 2019-08-20 18:25 評論0 收藏0
快速理解react-redux

摘要：和的結合簡述相信很多前端開發(fā)者都聽說或使用過，我曾寫過一篇關于快速理解的文章，雖說是快速理解，但實際上更應該叫做復習吧。它通過高階函數，純函數使我們在編寫組件時完全不用接觸相關內容，只通過將組件和數據連接起來即可。 react-redux react和redux的結合簡述相信很多前端開發(fā)者都聽說或使用過react-redux，我曾寫過一篇關于快速理解redux的文章，雖說是快...

MoAir 2019-08-23 14:11 評論0 收藏0
一篇文章總結redux、react-redux、redux-saga

摘要：編輯器頂層組件不就了嗎這就是。官方提供的綁定庫。具有高效且靈活的特性。在的中，可以使用或者等來監(jiān)聽某個，當某個觸發(fā)后，可以使用發(fā)起異步操作，操作完成后使用函數觸發(fā)，同步更新，從而完成整個的更新。不就ok了嗎？這就是 react-redux。Redux 官方提供的 React 綁定庫。具有高效且靈活的特性。 React Redux 將組件區(qū)分為容器組件和 UI 組件前者會處理邏輯...

April 2019-05-21 19:08 評論0 收藏0
todolist for react redux 學習總結

摘要：為了提高自己的學習效率，避免做一些無用的工作，我也決定以后無論是工作還是學習一定要養(yǎng)成定時總結的習慣，而且也要用文字記錄下來，這樣可以時常復習，理清邏輯，加深印象。一種解決方法是將對象作為參數，傳入容器組件。前言最近一直在學習react技術棧，相關的理論和概念基本都了解了，之前也用reactjs寫了幾個demo，切身體會到了函數式編程和組件化開發(fā)的強大之處，但因各種主客觀原因，事后...

anquan 2019-08-22 17:03 評論0 收藏0
手挽手帶你學React：四檔（上）一步一步學會react-redux （自己寫個Redux）

手挽手帶你學React入門四檔,用人話教你react-redux，理解redux架構，以及運用在react中。學完這一章，你就可以開始自己的react項目了。之前在思否看到過某個大神的redux搭建忘記了大神的名字這里只記得內容了憑借記憶和當時的學習路線寫下本文隔空感謝本人學習react-redux的時候遇到了很多坎，特別是不理解為什么這么用，這是什么東西，用來做什么。加上各種名詞讓人...

sixgo 2019-08-23 15:11 評論0 收藏0