redux和react-redux作簡單組件控制

 

此次咱們用兩種方式實現如下要求

1.三個組件

2.第一個組件有兩個按鈕 分別控制第二和第三個組件年齡和姓名的改變

3第二個組件展現姓名，第三個組件展現年齡

 

用到哪些插件

store  redux  

  

一 .新建項目

create-react-app  項目名稱

把沒必要要的東西刪掉 保持項目目錄爲這樣

而後全局install  兩個插件  

npm install store 

npm install redux

 

二.新建組件和盒子

新建三個組件 和一個展現組件的盒子 

組件：

組件頭部 先引入須要用到的插件  路徑要寫正確

btn組件：

 

 盒子：

盒子是爲了渲染組件的 直接放上去就行了  注意的是 首字母必須大寫

 還有一步就是須要吧盒子加載到頁面上 就須要把box 渲染到app裏

 

這個樣子  咱們的準備工做就完成了

三.分析store

我在以前博客中寫到過store 工做原理  因此在這裏咱們須要四個文件

store：

• 維持應用的state；
• 提供getState()方法獲取 state
• 提供dispatch(action)方法更新 state；
• 經過subscribe(listener)註冊監聽器;
• 經過subscribe(listener)返回的函數註銷監聽器。

 咱們能夠把整個運行流程想象成圖書館借書的流程

React Component（借書的人 ）
須要借書的人
Action Creator（具體借書的表達）
想借書的人向圖書館管理員說明要借的書的那句話。
Store（圖書館管理員）
負責整個圖書館的管理。是Redux的核心
Reducers（圖書館管理員的記錄本）
管理員須要藉助Reducer（圖書館管理員的記錄本）來記錄。

 

借書的人（ReactComponent）說了一句話（Action Creator）向圖書館管理員（Store）借一本書，圖書館管理員年紀大了啊記不住啊，便掏出了本身的記錄本（Reducers）。看了看知道了那本書有沒有，在哪，怎麼樣。這樣一來管理員就拿到了這本書，再把這本書交給了借書人。
翻譯過來就是：

組件想要獲取store中的數據State， 用ActionCreator建立了一個請求交給Store,Store藉助Reducer確認了該State的狀態，Reducer返回給Store一個結果，Store再把這個State轉給組件。

經過這樣的理解  大概就能夠猜想出來 文件內部代碼的做用

store：

 建立一個store 而後將reducer 傳給store  而後導出store

actioncreator：

 

 建立一個行爲  也就是給讓component說話  去借書  具體 store經過dispatch傳過來的action識別  來確認狀態

reducer：

 

 當store接受到action後，Store會自動的把當前store中存儲的數據（舊數據）和接受的action一塊兒傳給reducer

而reducer須要作的監聽state中數據的變化和store傳過來的數據進行對比   並將新的數據返回

 

state：

最簡單的數據

建立好store後   咱們就須要在btn組建中加入改變數據的方法

 

 

隨後再進行 修改子組件就完成了

 

 

 

react-redux 與redux的區別 

 

將方法作了個映射  不用引用去建立方法  能夠直接

 

 經過props 調用方法就好了

傳參須要bind

導出

用connect

connect()接收四個參數，它們分別是mapStateToProps，mapDispatchToProps，mergeProps和options

 

這個函數容許咱們將store中的數據做爲props綁定到組件上。

具體見 http://www.javashuo.com/article/p-vajwpmyt-gd.html connect用法

 隨後 就是子組件導出方式也須要修改

 

 

 

 index.js

更改如上