Redux—redux-thunk— action裏處理異步，封裝詳細步驟，適合初學者。

初學redux確實覺得很繞，因爲封裝的文件夾多容易亂。下面時我整理的步驟。

1、下載

npm install --save redux

2、創建store文件夾

在src目錄下創建store文件夾並在此文件夾下創建一下文件：
2.1、index.js
用來存放store實例
2.2、HomeReducer.js
用來存放Home頁面的數據
3.3、reducer.js
用來合併數據
4.4、actionCreate.js
用來封裝任務

3、創建store實例並引入reducer

4、HomeReducer.js,就是專門爲Home頁面創建的數據，當然其他頁面也可以進行訪問。其中包含我們對數據的操作。

Action 是把數據從應用傳到 store 的有效載荷。唯一改變 state 的方法就是觸發 action。一般來說你會通過 store.dispatch() 將 action 傳到 store。
action.js由在頁面調用第6步的任務時返回，返回值決定了我們對數據的操作邏輯。

5、reducer.js，引入combineReducers、引入HomeReducer.js中的數據

5.1、combineReducers用來驚醒數據合併，因爲我們現在值創建了一個頁面的數據，後續還會多個頁面也需要創建數據，合併也是爲了集中管理，後期我們號調用，所以進行合併。

6、對任務進行封裝

封裝的話是因爲，如果我們做起來來項目，會有很多任務，如果都寫在組件裏面不好查找，容易重複，封裝在一個文件裏面可以避免這些。用的時候在對應的頁面引入就行。

7、在頁面調用store中的數據

7.1、引入store實例
7.2、引入reducer.js中合併的Home頁面數據
7.3、調用action
7.4、將store中的數據賦值給state方便調用
7.5、用store.subscribe監聽store中數據是否由變化，如果由變化就更新數據

8、至此簡單的封裝完畢，如果還由多個頁面需使用redux需要怎麼做，其實跟上面的寫法時一樣的，接下來接着上詳細步驟。

1、例如我們現在由一個Phone也許要用使用redux，那我我們就在store文件下創建一個PhoneReducer.js。

2、同樣我們也需要對任務進行封裝

3、在reducer.js中引入PhoneReducer.js合併數據

4、在頁調用

9、action中異步處理

未完待續…