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。