在直接使用React-Redux庫之前，需要做一個鋪墊

三、容器元件(也叫Smart Component)和展示元件(也叫Dumb Component)

1、用處：這個知識點主要建立在上一章基礎上，在上一章中Redux和React進行配合，單個元件處理的任務太多，為了“讓每個元件專做一件事”，把元件按處理的任務型別進行拆分，分成容器元件和展示元件，以下是他們的分工

       展示元件：接受props，並渲染出來

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

2、容器元件和展示元件是父子級元件關係，容器元件在外層，展示元件在內層

　　　　　　展示元件就是一個純函式，根據容器元件傳遞過來的props進行渲染

 3、程式碼實踐  (修改Counter.js檔案)

　　此次把之前的Counter元件，按功能分成兩個元件，一個是Couter，作為展示元件，另一個是CounterContainer，作為容器元件

　　 Counter

　　CounterContainer

 　  在這裡CounterContainer（外層的容器元件）負責和Store進行互動，並將從Store中獲取到的狀態，通過props傳遞給Counter（內層的展示元件），然後展示元件將拿到的props值進行渲染，然後在結果一層層的提交出來。在總體看來，和之前的效果一樣，但是分工更加細緻了

      另外，React 支援用函式來表示無狀態元件，展示元件Couter也可以寫成，結果一樣生效

　　最後結果： 

四、元件Context

 1、用處：提供全域性的store，不用考慮store檔案在哪個位置，而避免react元件引入store帶來的麻煩，

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

 2、在根元件中，將store放入context，之後其他所有子元件就可以通過this.context.store訪問到context中store，從而避免了多次引入store帶來的麻煩

3、程式碼實現

書中是按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中哪一部分的資料型別

五、react-redux

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

　　（1）connect：連線容器元件和展示元件；

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

　　1、使用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