ReactNative-Redux實際應用

這裏寫圖片描述

Redux剛開始我也是一頭霧水,文章看着也是懵懵懂懂,經過多方查看別人寫的文章,自己在動手實現在回頭看別人寫的也就那麼回事。這裏還是使用幹活集中營的妹子接口來真實操作下Redux,建議一定要動手寫寫,理解不動就動手寫幾遍,再回頭看應該會清晰很多。 這篇也是我看博客結合自己的理解記錄的,DEMO地址:https://github.com/shuncaigao/ReduxG

Redux是什麼:

簡單來說Redux就是一個javascript狀態管理器, 可以構建一致化應用。Redux在React的基礎上(state和props),增加了Store,Action,Reducer,組件通過dispatch觸發描述發生什麼的Action,Reducer根據原來的state以及Action返回新的state,最後界面根據新的state更新界面 它們之間是怎麼串起來的代碼中會有體現。

Redux三個名詞,Store,Action,Reducer

Store:

  • store是唯一的,程序中所有的state都存儲在store中.store重要維持state,提供dispatch方法更新state,界面得以更新的源頭就在組件調用dispatch

Action:

  • action描述用戶做了哪些操作。比如用戶進入界面要請求網絡了,下拉刷新了,上拉加載了等等等這一些列操作,它會有一個ActionType(名字隨意起的,就是一些列常量用於區分用戶的哪種操作)進行分門別類。

    Reducer

  • reducer處理如何更新state,本身就是個函數。通過舊的state和action來返回新的state從而更新界面

分析程序

這裏寫圖片描述

  • 和明顯代碼結構中多出來三個文件,我們下面會跟據store,action,和reducer這三個文件來串串流程。

首先是store

這裏寫圖片描述

  • 代碼中主要注意點第五行我們導入Provider,在第十六行通過Provider將其包裹作爲程序的入口,至於配置的store就看在第六行導入的文件。 其實這兩個文件寫法基本是固定的開始不必糾結

這裏寫圖片描述

這裏值得注意的是第六行導入所有到所reducer集,所有的reducer編寫都會統一放到index中。

其次是action

這裏寫圖片描述

  • 其實這個actionType應該 歸到常量包裏面的,這個文件的意思就是一些用戶操作的常量類型,比如這個GIRL_LIST請求妹子列表,再比如刷新,刪除,reducer會根據類型去區分用戶的action操作。

這裏寫圖片描述

  • 這個girlAction文件就是用戶的一些具體操作,就像第七行的fetchGirl方法就是一個具體的action,用戶想要做的一些事,這個action會在用戶girl組件中被調用,也就是說用戶觸發這個事件。第二十行type:types.GIRL_LIST給type賦值,也就是和action進行關聯,一個type對應一個action。

再其次是reducer

這裏寫圖片描述

  • 首先看girlReducer,有多少個模塊就對應多少個reducer分類處理代碼也就更簡潔。第七行到第十行初始化一些初始值,比如否正在加載,初始時的數據,再看第十二行的girlReducer函數這裏就是通過之前定義的actionType去處理action返回結果更新state,從而更新界面。

這裏寫圖片描述

  • 這個index文件就是通過combineReducers()將所有reducer組合到一塊,這也就將所有reducer和store建立關聯(看configureStore.js文件)

最後看girl.js

這裏寫圖片描述

  • 這裏就是用戶觸發action事件的起源

這裏寫圖片描述

  • 這裏就是就是將Gril這個組件與store相關聯

這也是我練習時的一些記錄和自己理解的東西,肯定有些東西理解有所偏差望指正。。。。girl代碼比較多我也就不全貼出來了,具體的看DEMO吧,我已經託管到Github。

https://github.com/shuncaigao/ReduxG

發佈了154 篇原創文章 · 獲贊 173 · 訪問量 132萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章