React Native开发常用的项目架构搭建

在开发一个RN工程中,目前常用的开发架构:React+Redux;

看了多个开源项目后,自我感觉下面的目录架构还是比较经典的:


项目目录

为什么选择redux的框架:

背景:

RN的state(可变,子组件不可见)和props(不可变,子组件可见)的设计,在面对大型项目时候,容易因为不经意修改state造成状态混乱,组件渲染错误

RN使用了Virtual DOM,不需要Target绑定->Action修改UI属性,只要当状态变化,render新状态下的组件,数据单向传递,而MVC的设计模式存在双向数据流。

RN不易进行测试,Redux提供了非常方便的mock测试方式。

Redux开发

开发环境

安装Redux: ‘npm install –save redux'

安装React Native和Redux绑定库:npm install –save react-redux

安装Redux Thunk异步Action中间件:npm install –save redux-thunk

三个原则

单一数据源

整个应用的 state 被储存在一个对象树中,对象树存在于唯一的 store 中。store中的 state 绑定到组件

State 是只读的

惟一改变 state 的方法就是触发 action。action 是一个含有 type 属性的普通JS对象,type 可以用常量表示事件。

使用纯函数来执行修改

编写 reducers 来描述对应action如何修改 state 。一般可以用 switch(action.type) 来处理,无副作用

使用

react-redux提供了connect和Provider。

1.Provider是顶层的分发点,属性就是Store,将State分发给所有被connect的组件

2.connect:接受两个参数:一个是mapStateToProps或者mapDispatchToProps,一个是要绑定的组件本身。

Store

Store 就是把 Reducer 和 action 联系到一起的对象。Store 有以下职责:

维持应用的 state–类似数据库,存储应用的所有state。

提供 getState() 方法。获取 所有的当前state;

提供 dispatch(action) 方法更新 state,相当于存入数据库,存入action来改变state。

通过 subscribe(listener) 注册监听器。

Store本质上是一个对象,它以树的形式保存了整个应用的State。并提供了一些方法。例如getState( ) 和 dispatch( )。

Redux应用只有惟一一个Store。

Store通过createStore方法来创建,根据整个应用的根Reducer的初始State。

你可能感兴趣的:(React Native开发常用的项目架构搭建)