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這樣就完整的流程就如此
來張圖
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiIXZ05WZD9CX5RXa2Fmcn9CXwczLcVmds92czlGZvwVP9EUTDZ0aRJkSwk0LcxGbpZ2LcBDM08CXlpXazRnbvZ2LcRlMMVDT2EWNvwFdu9mZvwVP9cmTwkkeNlXVU9kMNpnW1x2RiZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39jM3IDMxITNwITMzUDM3EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
流程如上,那麼結構如下。
需要實作的效果如下, 頂部 一個輪播,下面listview,底部導航切換,資料來源豆瓣電影
程式入口
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
有需要的交流的可以加個好友