之前利用知乎日报的api写了react-native的一个入门项目，传送文章地址React Native 项目入门和源码地址RN入门项目源码，目前github上的代码已经在原文的基础上增加了新的功能，也就是本文进阶的内容，看完本文感兴趣的同学可以参考一下。
思考
在入门项目中我们已经实践了React native 的基本用法，展示了知乎日报的列表和详情页。在小型的项目中这样实践当然是没有问题的，我们在每个页面中自行请求网络，渲染组件，完全可以。但是当项目变得复杂，需要增加新的feather或者扩展log日志等基础模块时，这样的实践绝对让人苦不堪言，事倍功半。
从维护和功能扩展等角度来说，项目使用合适的框架是必需的。我们从日志入手来分析，比如我们需要记录系统中所有访问网络的日志，如果每个页面中使用fetch访问网络，则log需要记录在每个页面中进行记录：
1.png
一种进阶的方法是封装网络请求方法，日志记录统一封装模块中进行设置：
2.png
这种方法已经可以应付大部分情况，当log需求更改时，只需跟新一个模块即可。
如果这时需要增加数据库访问的日志，我们按照相同的思路，可以定义一个数据库访问的模块，在该模块中定义相应的日志模块。如果需要增加更多类型的日志模块呢，是继续按照同样的思路继续吗？
我们看一下刚提到的两种日志，提取一下共同点，都需要记录日志，我们有没有可能提取一个日志模块，图示一下思路：
3.png
假如这时又有一个需求是记录一下所有操作的执行时间，并根据执行时间的统计对相应的系统参数进行调整，这时候怎么解决呢，图示思路，我们可以在中间继续增加一个模块：
4.png
以上均是一些简单的思路，在具体工程实践中应该怎么做呢？我们先来看一下Flux的思路。
Flux
5.png
我们先来看一下Flux中的几个角色:
- View： 视图层
- Action（动作）：视图层发出的消息（比如mouseClick）
- Dispatcher（派发器）：用来接收Actions、执行回调函数
- Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面
其基本思路是对所有的动作进行封装，然后使用dispatcher对动作进行分发，在Store中完成处理后传递给View，完成一次完整数据流动，此流动为单向，不可逆。
其中Action我们理解为动作，此动作不仅包括动作类型（即目标，记录日志还是计算任务执行时间），同时还可以携带一定的数据，参照以上我们的思路图4，非常符合我们的需求。
Redux
Redux 实际是flux思路的一种实现，在角色定义方面略有不同，但是不妨碍思路相同。
- Action(动作) 与flux中的定义类似
- reducer 对Action中定义是state进行更新，注意流程中只能通过reduce进行更新，同时reducer要保证为纯函数，即对于一定对输入，一定可以获得相应的输出，而不会受到时间或者因此的影响。
- store store 实际完成了dispatcher的功能，同时连接了其他功能模块。
维持应用的 state；
提供 getState()
方法获取 state；
提供 dispatch(action)
方法更新 state；
通过 subscribe(listener)
注册监听器;
通过 subscribe(listener)
返回的函数注销监听器。
redux还有一个重要的概念：中间件，中间件可以在数据传递过程中进行一些额外的动作，如上文提到的日志记录等功能。至此，我们可以利用redux完成我们需要的功能。本文主要介绍思路，关于redux的具体学习推荐阮一峰老师的博客，Redux 入门教程。
redux-saga
我们知道在应用中一定会有很多异步操作，如网络访问、数据读取等，redux完成了数据的传递，但是在异步操作部分如果我们不加注意，可能会写出一团糟的代码，redux-saga正完成了这件事情。
Sagas 负责协调那些复杂或异步的操作。
项目实践
本文的项目进阶就是在代码中加入对redux的支持，当然按照本项目的需求增加这些是没有必要的，只是徒增了项目的复杂度。这里主要演示redux以及中间件redux-saga, redux-logger在项目中的使用。其中saga在以上已经进行了介绍，redux logger 实际是对所有Action state 进行了纪录，进行项目debug时，我们可以根据console的log输出判断项目的具体state变化：
Paste_Image.png
- store 的创建
const middlewares = [];
// 创建reducer
const rootReducer = combineReducers({story});
// 创建中间件saga
const sagaMiddleware = saga();
middlewares.push(sagaMiddleware)
if (process.env.NODE_ENV === 'development') {
//创建中间件logger
const logger = createLogger();
middlewares.push(logger);
}
//applymiddleware配置中间件
const createStoreWithMiddleware = applyMiddleware(...middlewares)(createStore);
function createDefaultStore(initialsState) {
//通过reducer 获取stare
const defaultStore = createStoreWithMiddleware(rootReducer, initialsState);
return defaultStore;
}
const store = createDefaultStore();
- Reducers的创建
可以创建多个reducers，通过
combineReducers();
进行组合
const initialState = {
id: "",
refreshing: true,
loaded: false,
story: new Object()
};
export default function story(state = initialState, action) {
switch (action.type) {
case ActionType.Fetch_Story_Detail:
return Object.assign({}, state, {
id: action.id,
refreshing: true,
loaded: false
});
case ActionType.Fetch_Story_Detail_Done:
return Object.assign({}, state, {
id: action.id,
refreshing: false,
load: true,
story: action.story
});
default:
return state;
}
}
如上创建store reducer
- connect
界面组件需要connect redux，可以dispatch Actions，同时可以接收到相应的回调，完成界面的render。
function mapStateToProps(state) {
const {story} = state;
return {
story
};
}
StoryDetailPage.propTypes = propTypes;
export default connect(mapStateToProps)(StoryDetailPage);
经过这几步，我们项目的结构就非常清晰了，在进行模块维护和扩展时就很方便了。
代码地址：react-native-zhihu
感谢：
http://www.ruanyifeng.com/blog/2016/01/flux.html
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
https://github.com/kenberkeley/redux-simple-tutorial
http://leonshi.com/redux-saga-in-chinese/index.html
http://cn.redux.js.org/index.html
欢迎关注公众号wutongke，每天推送移动开发前沿技术文章：
wutongke
推荐阅读：
React-native项目入门与思考
React native 项目入门(知乎日报，豆瓣电影，[one]一个)
React native 项目进阶(redux, redux saga, redux logger)
React Native 项目2（One 【一个】客户端）
网友评论