redux與react-redux

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。