ES6+redux實現Counter

react說白了就是用jsx開發一個view層的東西，若是你要想開發一些web端的網頁應用，你須要作的就是結合起目前能夠管理數據端的一些應用，今天咱們說到的是redux，redux我目前學習的也不是很深，先後差很少10天時間，只談一下本身的理解！

網絡上有不少關於redux的講解，目前以爲阮一峯大神的最適合入門者初學，http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

redux是經過什麼樣的方式管理數據？組件之間怎麼實現通訊？怎麼實現單向數據流？

大致上的redux的過程就分爲三步：

1.用戶觸發了事件，action發送一個state到reducer裏面去

2.reducer根據action+state而後生成新的state

3.新state經過屬性顯示到view層上面

 

下面講的仔細一點：

1.首先是咱們爲何要用redux?何時用？何時能夠不用?
其實大部分的狀況咱們均可以不用使用redux的，若是嵌套的層次不高，交互性也不高，具體的能夠在阮一峯的學習筆記上面看到，網址在最上面

2.既然咱們用了redux，redux具體有哪些好處？

redux實現的最大的好處就是他可讓每一種state對應一種view，這樣能夠實現記憶功能，並且數據便於管理

3.怎麼使用redux？
咱們藉助redux文件夾下面examples裏面的real-world例子文件目錄去看一下

實際上咱們最好的是新建action,由於你能夠先肯定有哪些功能並且是不和其餘文件起衝突的，不依賴其餘的文件，新建文件夾順序

action(constants,middleware)——>reducers——>store——>comonents——>containers——>index.js

containers文件通常是須要輸入一個容器組件，而後咱們在index.js中經過Provider方法把store注入到容器組件，

因此containers中的組件是須要被connect方法處理過的，被connect方法處理過的UI組件會變成容器組件

4.咱們再具體說一下怎麼去操做？

從action提及，action裏面咱們首先要 export const ADD_TODO="ADD_TODO"

這邊有兩個問題，爲何要用const定義，在ES6中定義有額外的兩種方法，let和const的區別在於，const申明的變量須要在聲明的時候必須賦值並且後面不能夠任意修改，修改會報錯，那麼ok，咱們爲何要用變量去替換字符串？爲了在使用的時候不出錯，咱們最好用變量替換掉。

結束了定義變量的部分那麼咱們須要寫什麼呢？

固然是actionCreators,咱們定義一種view對應一種state,那麼生成這一種state咱們固然得用一種action，一種action表明的是一種功能，寫法以下：

export function  addTodo(text){return {type:ADD_TODO,text}}

很明顯,一旦咱們調用函數會返回一個包含type的對象，text是什麼？當前是咱們要操做的數據啦！action對reducer說，我這種type你須要做出的迴應是刪除數據，reducer說你要把數據給我啊，text就是這個

constants通常儲存的是咱們的字符串到變量的替換過程，咱們能夠用 import * as types from "地址"所有調用過來而後咱們再用types.ADD_TODO調用其中的一個也是能夠的，固然咱們用import{ADD_TODO} from "地址"調用也是能夠的對吧！

middleware是個什麼東西呢？中間件的使用以及異步的操做過程能夠詳見阮一峯的第二篇文章，最上面的網址

那麼text怎麼到action裏面的？咱們後面說

那麼咱們的action已經寫完了，接下來咱們須要寫reducers，什麼是reducers，是純函數，是一種接受咱們的state和action能夠生成新state的東西，說白了action只發布命令，作事的就是reducer，那麼咱們應用的reducers愈來愈多的時候咱們能夠把他們拆分開來，爲何咱們能夠拆分？由於每種功能之間互不影響，你幹你的，我幹個人，互不影響，ok,咱們怎麼拆分？直接把大函數拆分紅小函數，每個小函數負責一個狀態的實現。而後咱們用combineReducers去吧全部的reducer合併起來生成一個大的。

若是是兩個以上的reducer，咱們能夠直接combineReducers({todo1,todo2,todo3}),es6的寫法

好吧，咱們寫好了action和reducer文檔，下面應該寫store了，store的話引入reducer便可

const store = createStore(reducers),export default store這樣就能夠了？固然不是，咱們要看看是否是有第二個參數，第二個參數initialstate是state的初始值，通常狀況只須要將reducer的數據更新拿過來，沒有的話就使用初始值。

那麼好的怎麼將數據拿來?

store提供三種方法，分別是getState(獲取當前state),subscribe(監聽state變化)，dispatch(分發action)

那麼咱們如今已經處理好actions,reducers,stores，下面咱們應該寫的是components

component通常寫的是咱們的UI組件，是咱們在view上面能夠看到的東西，好的，那麼咱們如今要在view上面看到的具備變化性質的東西應該怎麼去傳入屬性值呢？
如今就應該用到了connect和Provide了，react-redux裏面的這兩種方法可讓全部的組件成功的使用咱們傳入的state對象，

咱們須要作的就是使用connect讓最外層的組件變成容器組件，而後使用Provider傳入store，讓全部的子組件可使用到state對象

，connect中有四種方法，這邊只說兩種，分別是mapDispatchToProps和mapStateToProps，後者是創建state到props的映射，讓UI組件可使用容器組件中傳入的屬性值

傳入的todos我能夠能夠直接在UI組件內調用，至關於咱們傳入了一個屬性名稱是todos,mapStateToProps還能夠監聽state的變化，能夠理解爲getState和subscribe功能的集合體！

mapDispatchToProps是創建起UI組件的參數到actions的映射（到store.dispatch方法的映射）

基礎的東西都說完了，index.js後續用webpack打包一下就能夠了,今天先說到這吧！0.0