redux個人理解
Flux就像眼鏡,你會知道你在什么時候需要它
使用redux的目的是方便我們理清各個組件的state狀態(tài),我們在組件中使用props傳遞數(shù)據(jù)傳來傳去也容易搞混,這個時候,就是redux大顯神威的時候,
- 單一數(shù)據(jù)源,所有數(shù)據(jù)都存儲在store中,我們需要什么數(shù)據(jù)就是store調(diào)用
- state只讀，state 只能通過action進行更改.
- 在改變state tree時，用到action，但是我們是通過reducers來處理函數(shù)的
添加redux相關依賴
1 npm install redux react-redux -S //這兩個是必須的
2 npm install redux-logger(日志記錄) redux-thunk(支持異步請求) -S //中間件可選
3 react-native run-android
redux中幾個重要的概念
1. Action
中文譯動作行為,行動.像它的名字一樣,我們在redux體系中修改一個狀態(tài)必須先發(fā)出action ,action是行為,一個行為可以分為不同的幾種類型,比如打人,打別人左臉是一種type ,打右臉也是一種type,當然選擇不打也是這種行為的一種體現(xiàn)方式.我們選擇的type就會影響到這個人受挨打后的狀態(tài),那也就是他可能第二天左臉腫了,或右臉.
所以這里一種打人行為的幾種處理方式,會造成不同的表現(xiàn)結果,也就是我們所謂的 ui對應的各種展現(xiàn)方式.
我在這里是定義了三種關于計數(shù)的type
2. dispatch
說完了行為,該說調(diào)度了,我們定義了各種各樣的行為,但是之前也說過redux是單向數(shù)據(jù)流,想要觸發(fā)action我們需要使用我們觸發(fā)了一個計數(shù)的增加操作dispath(increase)
3. connect
React-Redux 提供connect方法，用于從 UI 組件生成容器組件。connect的意思，就是將這兩種組件連起來。
connect 在我理解看來就是,連接reducers處理函數(shù)與ui的一個方法.
- mapStateToProps會訂閱 Store，每當state更新的時候，就會自動執(zhí)行，重新計算 UI 組件的參數(shù)，從而觸發(fā) UI 組件的重新渲染。
reducers函數(shù)處理完了,如何告訴ui呢這里connect就發(fā)揮上用場了 - mapDispatchToProps是connect函數(shù)的第二個參數(shù)，用來建立 UI 組件的參數(shù)到store.dispatch方法的映射。也就是說，它定義了哪些用戶的操作應該當作 Action，傳給 Store。它可以是一個函數(shù)，也可以是一個對象。
4. reducers
dispath 將action派發(fā)到reducers中我們根據(jù)派發(fā)過來的actions.type來具體確定使用什么業(yè)務邏輯來改變一些數(shù)據(jù),致使ui發(fā)生改變,如圖,我們可以自定義state的初始狀態(tài)
順帶插一嘴
combineReducers
我們呢在實際項目中,不可能只有counter這一個reducers處理函數(shù),肯定會有非常多,那么 combineReducers 就是用來管理這一堆reducers的
5. store
說了半天,store哪里去了,剛才有沒有好奇reducers處理完成后,store如何更新的?應該這么問reducers處理函數(shù)直接影響了新的視圖,但是好像并沒有看到他們在哪里關聯(lián)?看完下面就明白了
Provider包裹住整個app將 store傳入,起點即終點,完成一次循環(huán),看到這里全部連起來了吧.
