? ? ? ? ?1.redux案例完整版

????????上一篇文章我們是沒有action文件，直接在countre組件與store以及reducer直接進行狀態的改變以及展示。

? ? ? ? 下面我們加上action文件，我們就不能直接通過dispatch傳，而是通過調用action里面的函數講我們傳入的參數變成action這種對象形式然后dispatch傳遞給store。

????????

? ? ? ? data是我們傳入的參數，返回值是action對象的形式。這里我們一直寫type可能會拼錯，我們也可以定義一個常量文件，去給type重新定義一個常量保存，比如全大寫，這樣保證不會拼錯。

? ? ? ? 這是是引入的store之后，store.dispatch（createIncrementAction（value*1））這種里面是通過action函數變為action格式，然后外面dispatch直接扔到store，然后store調用的reducer開始按照里面的action加工狀態。狀態被改變之后通過store.getState（）直接獲取狀態展示到頁面上。

? ? ? ?現在我們正式開始react-redux。

? ?2.react-redux

????????????????

? ? ? ? 這里是react-redux的流程圖，相當于封裝了redux，讓我們更加直觀的用react-redux庫來更好的使用redux。

????????現在我們先實現容器組件和ui組件的連接。

????????

? ? ? ? 先創造容器組件Count在container文件夾，里面引入我們的react-redux庫里面的connect，以及子組件Count,然后連接起來暴露Count組件。我們通過react-redux的connect方法，connect（）（）第二個括號是我們要連接的ui組件，第一個括號是我們給ui組件傳遞的props。

????????

? ? ? ? 然后我們容器組件在App組件之中引入并且渲染，然后傳入store方法。通過props。

????????這里的子組件只是于容器組件進行傳輸數據，不和redux有任何關系，所以store的一切刪除掉。

????????現在我們完成了連接子組件和容器組件，并且給容器組件傳了store。

? 3.react-redux的基本使用

????????我們通過props在App組件調用Count組件的時候傳了store。

? ? ? ? 現在我們在控制臺看組件的關系。

????????

? ? ? ? Count組件是容器組件Count的子組件。所以props傳遞就說的通了。

????????

? ? ? ? 但是我們在括號里面連接的子組件，我們應該怎么去傳props呢？connect的第一個括號。

????????這里封裝好的方法是connect里面的參數是函數，我們通過函數的返回值來傳，如下圖，注意返回值和props接收的格式都是key：value組合，一共有2個函數參數，第一個返回的是redux保存的狀態，第二個返回的是操作狀態的方法。

????????

? ? ? ? ?這里第一個函數參數是封裝的react-redux自動給我們執行store.getstate()放這里下面的dispatch同理。然后我們在這里設置了狀態以及方法，都是key value的寫法。我們傳props給子組件

???????? 我們在第一個函數返回的參數中返回的是一個對象，值是state，當前我們的state只有一個是數字0，所以直接這樣給count這個key賦值就可以了，第二個函數，是傳遞的方法，比如當我們調用jia的時候，我們傳一個參數value，然后通過createIncrementType生成對應的加的action，然后dispatch發送給store，再給到reducer加工，然后前面的state更新，這樣就實現了整個加的過程。

????????

? ? ? ? 傳了參數就可以直接調用，調用之后會執行dispatch送里面的action到store連接的reducer加工。而且可以簡寫，把第二個函數props當成對象來寫，這樣也會自動識別，react-redux庫會自動識別。

????????

? ? ? ? 這樣很簡潔，雖然可讀性我認為不高。寫成這種對象，keyvalue，只需要寫成action，react-redux就可以幫我們dispatch，也就是react-redux幫我們識別如果是對象就直接dispatch。

????????而且我們用了connect連接redux之后，不需要subscribe監聽狀態的變化。容器組件幫我們監聽使用。也就是說用了react-redux庫就自動幫我們監測狀態變化去刷新頁面。

????????

????????當我們用Count容器組件的時候我們需要傳store，但是每次都需要傳，如果有很多容器組件就很麻煩。這時候我們可以用react-redux的一個provider api。

????????

????????這樣就可以自動給容器組件傳入store。

????????優化文件。這時候文件太多，我們可以直接把count ui組件直接寫到容器組件里面，這樣就可以很方便的去看了，也就是ui組件不需要暴露或者引入，直接寫道容器組件就可以了。

????????

????????

????????就把ui組件以及他的容器組件寫到一起。

?4.react-redux案例實現，數據共享。

????????我們上面的案例，只是走通了流程，我們在reducer里面初始化一個state，然后定義了加工的方法，在action里面定義了傳參數改變成action對象的形式，用react-redux里面的connect幫我們調用store里面的api，store文件定義了一個srore。我們只是實現了操作reducer里面的state并且拿過來使用。我們是直接把初始化的0當作共享的狀態了

????????如果我們現在創建一個新組件person，person組件可以從redux拿到count組件當前的和的值，count組件可以拿到rudex里面存的person組件的關于人的數據

????????首先就需要去創建person組件對應的action以及reducer文件，這里我們需要創建文件夾專門存放action以及reducer。

????????

? ? ? ?

? ? ? ? 這里我們Person對應的reducer和action寫好了。

? ? ? ? 但是現在我們有兩個reducer，那么我們的store就需要改一改了。

????????

? ? ? ? 這里用到的api是固定格式，需要記住。合并2個reducer為一個對象，里面都是函數，這樣rens就是person的reducer，he就是count的reducer，這時候注意thunk，因為我們的store不能接受函數，只能接受一般對象，這里的中間件applyMiddleware（thunk）幫我們執行函數拿到返回值是一個對象，就可以了。

????????

????????

? ? ? ? 然后我們的person文件就可以去connect創造容器組件，以及連接ui組件之后，傳過來我們在reducer初始化設置的數組對象，以及action文件中創建的生成對應type的action的函數，調用傳入我們的對象參數就可以自動變成對應的action了，然后這里我們是簡寫，react-redux庫會自動識別對象然后幫我們dispatch給store連接的reducer上加工，然后更新state。

? ? ? ? 這樣我們的共享狀態流程就通了，只需要用解構賦值通過props調用通過解構拿過來的狀態就可以了，展示出來就行了。

? ? ? ? 流程是這樣的，還是比較繁瑣的，但是代碼并不難，需要去多練習。

????????