React native 项目进阶(redux, redux saga, redux logger)

782 查看

之前利用知乎日报的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