天天看點

react-native,react-redux和redux配合開發

react-native 的資料傳遞是父類傳遞給子類,子類通過this.props.** 讀取資料,這樣會造成元件多重嵌套,于是用redux可以更好的解決了資料和界面View之間的關系, 當然用到的是react-redux,是對redux的一種封裝。

react基礎的概念包括:

1.action是純聲明式的資料結構,隻提供事件的所有要素,不提供邏輯,同時盡量減少在

action 中傳遞的資料

2. reducer是一個比對函數,action的發送是全局的,所有的reducer都可以捕捉到并比對與自己相關與否,相關就拿走action中的要素進行邏輯處理,修改store中的狀态,不相關就不對state做處理原樣傳回。reducer裡就是判斷語句

3.Store 就是把以上兩個聯系到一起的對象,Redux

應用隻有一個單一的 store。當需要拆分資料處理邏輯時,你應該使用reducer組合 而不是建立多個

store。

4.Provider是一個普通元件,可以作為頂層app的分發點,它隻需要store屬性就可以了。它會将state分發給所有被connect的元件,不管它在哪裡,被嵌套多少層

5.connect一個科裡化函數,意思是先接受兩個參數(資料綁定mapStateToProps和事件綁mapDispatchToProps)再接受一個參數(将要綁定的元件本身)。mapStateToProps:建構好Redux系統的時候,它會被自動初始化,但是你的React元件并不知道它的存在,是以你需要分揀出你需要的Redux狀态,是以你需要綁定一個函數,它的參數是state,簡單傳回你需要的資料,元件裡讀取還是用this.props.*

6.container隻做component容器和props綁定,

負責輸入顯示出來,component通過使用者的要互動調用action這樣就完整的流程就如此

來張圖

react-native,react-redux和redux配合開發

流程如上,那麼結構如下。

react-native,react-redux和redux配合開發

需要實作的效果如下, 頂部 一個輪播,下面listview,底部導航切換,資料來源豆瓣電影

react-native,react-redux和redux配合開發

程式入口

store 和資料初始化

action純函數,同時把action type單獨寫出來。在action同目錄下檔案types.js

hotshow-action.js

allReducers.js 整合所有reducer

hotshowreducer

api 資料請求

containers\hotshow\index

BannerCtn 輪播用的swiper 插件, 但swiper加入 listview 有個bug就是圖檔不顯示,結尾做答

hotshow-list

剩下 便是foot tab 和單個item的編寫

到此一個react-native 配合redux 程式設計首屏顯示就大體完成了,

Swiper Image 在ListView不顯示在,解決如下,測試手機微android

4.4.4,有把react-native更新為0.44.2 親測無效

關于初始ajax資料,可以在create store的時候擷取資料建構初始狀态,也可以在ComponentDidMount的時候去執行action發ajax,

上文寫錯了,github 糾正

github:

https://github.com/helloworld3q3q/react-native-redux-demo

有需要的交流的可以加個好友

繼續閱讀