天天看点

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

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

继续阅读