containe dem 更新 container dispatch sub 剛才 reduce 業務

Redux是一個數據狀態管理插件,論是移動端還是 pc 端，當你使用 React 或者 vue 開發組件化的 SPA 程序時，
組件之間共享信息是一個非常大的問題。在react開發中，使用 React 開發系統，絕大部分都需要結合 Redux 來使用。
第一步安裝
安裝redux的時候，我們經常也會安裝react-redux。

第二步redux的使用方法
Redux設計理念： Redux 是一個管理數據的工具，我們創建一個store變量用來管理數據。而這個store不是憑空創建的，創建它的前提是，得設定一個管理規則。
以上代碼中，我們的管理規則是：數據（即state）默認是 0，傳入INCREMENT就加一，傳入DECREMENT就減一 。創建store用來管理數據，具體的管理形式是什麽呢？

第一，要通過一個函數來觸發數據的變化，即dispatch，觸發的時候一定要符合之前定制的規則，否則無效。第二，數據一旦發生變化時，會導致怎樣後果，即subscribe中
定義的函數會執行。第三，如何取得當前的數據，即store.getState()。這個就是普通的發布和訂閱的設計模式，也是js種慣用的設計模式。
還有一點特別要註意，即在規則函數中，數據變化時要return一個新的值，而不是直接修改原來的值。
具體內容見下圖

Redux 和 React 一般是結合使用的，那他們是如何集成的呢？
第一步：創建 store

第二步：創建規則
使用 Redux 時，剛才提到的“規則”被稱作reducer。
先看userinfo.js的代碼

再看index.js的代碼

第三步：創建 action
在實際的應用中，我們需要用一些函數將它分裝起來，即./app/actions中的文件，雖然此處只有userinfo.js這一個文件。在userinfo.js中，我們把每個業務操作都分裝為一個
函數，該函數接收data，然後再根據 reducer 的規則對 data 進行分裝，最後返回。當然，最後返回的結果肯定還是會交給dispatch來處理，

第四步: 結合到 React
在./app/index.js中創建store並傳遞給組件，然後讓組件作為所有組件的根節點。

然後看./containers/Hello.jsx，在Hello組件中通過this.props.userinfo和this.props.userinfoActions即可獲取數據和 actions

獲取了數據和 actions 該怎麽用呢？我們將它們傳遞給子組件，A和B組件負責展示數據，C組件負責觸發actions。

現在我們可以運行我們的項目了，見下圖

點擊修改按鈕
頁面會變化為

在react-redux的項目中，action是一個對象，其中type屬性是必須的，reducer是一個函數，它接受一個state和一個action，
根據action的type返回一個新的state。store是個對象，裏面存放著數據，它有自己的一些方法，用來獲取、更新數據等。

本博客升華自：大眾點評app視頻。
完整的demo見github:https://github.com/JserJser/reactWebApp/tree/master/react-redux。

redux與react-redux