筆記----深刻淺出《React和Redux》第三章Redux框架 (使用React-Redux庫)

在直接使用React-Redux庫以前，須要作一個鋪墊

 

3、容器組件(也叫Smart Component)和展現組件(也叫Dumb Component)

一、用處：這個知識點主要創建在上一章基礎上，在上一章中Redux和React進行配合，單個組件處理的任務太多，爲了「讓每一個組件專作一件事」，把組件按處理的任務類型進行拆分，分紅容器組件和展現組件，如下是他們的分工

 

       展現組件：接受props，並渲染出來

       容器組件：和Store打交道，處理State

 

 

二、容器組件和展現組件是父子級組件關係，容器組件在外層，展現組件在內層

 

         　　

 　　　　

　　　　　　展現組件就是一個純函數，根據容器組件傳遞過來的props進行渲染

 

 三、代碼實踐  (修改Counter.js文件)

 

　　這次把以前的Counter組件，按功能分紅兩個組件，一個是Couter，做爲展現組件，另外一個是CounterContainer，做爲容器組件

 　　

　　 Counter

　　 

 

　　CounterContainer

　　

 　  

　　

 　  在這裏CounterContainer（外層的容器組件）負責和Store進行交互，並將從Store中獲取到的狀態，經過props傳遞給Counter（內層的展現組件），而後展現組件將拿到的props值進行渲染，而後在結果一層層的提交出來。在整體看來，和以前的效果同樣，可是分工更加細緻了

 

      另外，React 支持用函數來表示無狀態組件，展現組件Couter也能夠寫成，結果同樣生效

　　

 

　　最後結果： 

　　　　　 

 

 

 

 

4、組件Context

 一、用處：提供全局的store，不用考慮store文件在哪一個位置，而避免react組件引入store帶來的麻煩，

          實現方式就是把這個store塞進組件的context屬性中，這樣子每一個組件都能直接訪問到store的狀態值了

 

　　　 

 二、在根組件中，將store放入context，以後其餘全部子組件就能夠經過this.context.store訪問到context中store，從而避免了屢次引入store帶來的麻煩

                        

 

三、代碼實現

 

書中是按context舊版本使用方式，新版使用方式雖然略有不一樣，可是總體思路仍是差很少

 

　　在主入口文件中App.js

　　

　　說明：爲了避免是ControlPanel組件工做變得複雜，在此另寫一個根組件Provider，並將store引入，做爲Provider組件的屬性值

 

 

　　Provider.js 　 

 　  

　　關鍵的步驟來了，這一步是將store塞進context中，方便以後的子孫組件們輕鬆調用。

　　

　　注意注意！！！！！

　　（i）這裏使用到了須要藉助一個函數getChildContext()，他會返回一個context對象，咱們須要把store放在這裏面

　　（ii）在這裏還須要用childContextTypes指定context的結構類型，如不指定，會產生錯誤

 

 

　此時若是將指定類型註釋了

　

　　

     能夠看出getChildContext和childContextTypes搭配使用

 

  

 

　　ControlPanel.js

　　 

　　這個保持不變

 

 

 　  Counter.js

　　

　　

　　這個組件做爲PropTypes子組件，能夠從context拿去store，而不須要像以前同樣，在當前組件中引入store文件以後才能夠訪問子組件

　　

 

　　注意注意！！！！！

　　在須要調用store的組件中，首先在constructor和super中加入參數context，進行初始化

 　  而後使用contextTypes指定的store結構類型，記住，若是contextTypes沒有被定義，context只是一個空對象

 

　爲了在控制檯看一下效果，咱們打印當前組件進行觀察

　

 

　對比註釋先後的變化

　  

  　

 

 

   

   

 　　最後能夠經過this.context.store進行訪問了

 

 

 　　總結：舊版本使用須要

　　　　　  根組件：

                      getChildContext()放入須要共享的數據

                      childContextTypes指定context中數據的數據類型

                 子組件：

                      contextTypes指定須要接受的context中哪一部分的數據類型

 

 

5、react-redux

 　　以前三和四的「容器/展現組件」以及「訪問store方式」，實現「react-redux」庫中最主要的兩個功能：

　　（1）connect：鏈接容器組件和展現組件；

　　（2）Provider：提供了包含store的context

 

　　一、使用react-redux以後的代碼

 

　　Summary.js

　　

　　由於展現組件不涉及狀態，在這裏我以函數形式進行書寫，能夠對比下面的Summary展現組件以類的形式書寫

 

　　Counter.js

　　

　　 

 

　　App.js入口文件

　 　 　　

 

 　　其餘代碼照舊

 

　　（1）connect：

 

　　　　　　connect(mapStateToProps，mapDispatchToProps)(Counter)

 　　　　　　

這個方法接受兩個參數mapStateToProps和mapDispatchToProps，執行結果仍然是一個函數，因此以後繼續加了一個小括號，其中小括號裏放了展現組件，通過這兩個執行後產生容器組件

　　　　　　

mapStateToProps和mapDispatchToProps是兩個函數，mapStateToProps負責將Store上狀態轉化爲內層組件的props，mapDispatchToProps負責將動做進行派發

　　　　　　

 

　　（2）Provider

 

react-redux中封裝了相似咱們以前寫的Provider類，可是裏面更加嚴謹，好比不只要求store是一個object，還要求store是一個包含subscribe，dispatch，getState函數的store

 

 

 

 

 

部分參考

https://reactjs.org/docs/legacy-context.html