神刀安全网

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

之前利用知乎日报的api写了react-native的一个入门项目,传送文章地址React Native 项目入门和源码地址RN入门项目源码,目前github上的代码已经在原文的基础上增加了新的功能,也就是本文进阶的内容,看完本文感兴趣的同学可以参考一下。

思考

在入门项目中我们已经实践了React native 的基本用法,展示了知乎日报的列表和详情页。在小型的项目中这样实践当然是没有问题的,我们在每个页面中自行请求网络,渲染组件,完全可以。但是当项目变得复杂,需要增加新的feather或者扩展log日志等基础模块时,这样的实践绝对让人苦不堪言,事倍功半。

从维护和功能扩展等角度来说,项目使用合适的框架是必需的。我们从日志入手来分析,比如我们需要记录系统中所有访问网络的日志,如果每个页面中使用fetch访问网络,则log需要记录在每个页面中进行记录:

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

一种进阶的方法是封装网络请求方法,日志记录统一封装模块中进行设置:

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

这种方法已经可以应付大部分情况,当log需求更改时,只需跟新一个模块即可。

如果这时需要增加数据库访问的日志,我们按照相同的思路,可以定义一个数据库访问的模块,在该模块中定义相应的日志模块。如果需要增加更多类型的日志模块呢,是继续按照同样的思路继续吗?

我们看一下刚提到的两种日志,提取一下共同点,都需要记录日志,我们有没有可能提取一个日志模块,图示一下思路:

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

假如这时又有一个需求是记录一下所有操作的执行时间,并根据执行时间的统计对相应的系统参数进行调整,这时候怎么解决呢,图示思路,我们可以在中间继续增加一个模块:

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

以上均是一些简单的思路,在具体工程实践中应该怎么做呢?我们先来看一下Flux的思路。

Flux

React native 项目进阶(redux, redux saga, redux logger)
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变化:

React native 项目进阶(redux, redux saga, redux logger)
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

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » React native 项目进阶(redux, redux saga, redux logger)

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址