9. redux如何精简代码

经过2天折腾,终于把API全面切换到GitHub,总结一下经验:

  • redux精简代码
  • 使用redux-persist持久化数据
redux如何减少样板代码#####

通过之前的代码不难看出redux系统里的ActionTypeActionReducer都有一定的共性,小项目无所谓,这样写更清晰,但是一旦组件以及业务增多,开发效率就不是很高了。本来是打算使用第三方组件的,比如redux-actions(https://github.com/acdlite/redux-actions)等,但是实验了一下,功力不足反而没有成功,然后自己照抄官方说明写了一下,发现代码出乎意料的简单,核心代码直接照抄的官方文档,看官嫌我啰嗦可以直接跳过本文去原文档,中文英文。下面就我自己的理解在此记录一下。 通过改造,下面是一个请求GitHub Search Repositories APIaction的最终代码:

export function searchRepos(q = 'react-native', page = 1, per_page = 15) {
    return {
        // Types of actions to emit before and after
        types: [SEARCH_REPOS_REQUEST, SEARCH_REPOS_SUCCESS, SEARCH_REPOS_FAILURE],
        // Perform the fetching:
        callAPI: () => Util.get(Api.search_repos, {
            q,
            page,
            per_page,
        }),
        // Arguments to inject in begin/end actions
        payload: {
            q,
            page,
            per_page,
        }
    }
}

API 请看 GitHub V3GET /search/repositories

因为每个fetch api的过程都是requestsuccessfailurereduxaction返回的对象必须是这样的{type: ...},那么这样的action如何解析呢,这就要使用中间件了,前文说了,redux里都是函数式的,这就可以让我们在传递过程中做处理了,其实可以理解为类似java spring中的AOPservlet中的拦截器,nodejs express中的koa,具体代码照文档,几乎一字未改: app/callAPIMiddleware.js

export default function callAPIMiddleware({ dispatch }) {
  return next => action => {
    const {
      types,
      callAPI,
      payload = {}
    } = action

    if (!types) {
      // Normal action: pass it on
      return next(action)
    }

    if (
      !Array.isArray(types) ||
      types.length !== 3 ||
      !types.every(type => typeof type === 'string')
    ) {
      throw new Error('Expected an array of three string types.')
    }

    if (typeof callAPI !== 'function') {
      throw new Error('Expected callAPI to be a function.')
    }

    const [ requestType, successType, failureType ] = types

    dispatch(Object.assign({}, payload, {
      type: requestType
    }))

    return callAPI().then(
      response => dispatch(Object.assign({}, payload, {
        response,
        type: successType
      })),
      error => dispatch(Object.assign({}, payload, {
        error,
        type: failureType
      }))
    )
  }
}

可以看到最后的return和以前的action是一模一样的。 在创建store的时候链接我们自己的中间件,修改app/store.js如下

applyMiddleware(thunk, logger, callAPIMiddleware)

最后reducer我没有更改,标准FLUX流程是需要改的,套用文档中一句话解释原因:

switch 语句 不是 真正的模版。真正的 Flux 模版是概念性的:发送更新的需求,用 Dispatcher 注册 Store 的需求,Store 是对象的需求 (当你想要一个哪都能跑的 App 的时候复杂度会提升)。不幸的是很多人仍然靠文档里用没用 switch 来选择 Flux 框架。

这里是因为我以前的代码不够规范,在reducer里处理了分页数据,无论是本着单一职责或是其他的设计原则来讲,这都是不好的,在此特别提出请勿模仿。 在组件内部调用的的方式没有任何改变,这也是redux的强大之处。 给个效果图

search react-native

持久化数据#####

手机端肯定需要考虑离线的情况发生,有了redux,这件事情就简单了,只需要把store这个state树持久化就OK了,官方持久化接口使用的是AsyncStorage,这里为了简化操作,使用第三方组件redux-persist项目地址,代码很简单,修改app/store.js如下:

import {autoRehydrate, persistStore} from 'redux-persist';
...
function configureStore(onComplete: ? () => void) {
     const store = autoRehydrate()(createStoreWithMiddleware)(appReducers);
     persistStore(store, {
         storage: AsyncStorage
     }, onComplete);
     if (isDebugInChrome) {
         window.store = store
     }
     return store;
 }

README文档很详细,就不赘述了,完整代码地址

首页

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏用户2442861的专栏

工欲善其事,可能会有用的Clion技巧

半年前我开始用 Clion,顺带着写了一篇心得记录使用 CLion 的技巧,没想到发布在简书后浏览量还是挺高的,居然还获得了人生中第一笔真正的打赏,感动之余也...

81620
来自专栏程序员的SOD蜜

“设计应对变化”--实例讲解一个数据同步系统

 系列文章索引: [WCF邮件通信系统应用 之 数据同步程序 之 设计内幕 之 一] 同步一个数据库要发多少个数据包? [WCF邮件通信系统应用 之 数据同步...

27670
来自专栏程序猿DD

优雅处理你的Java异常

来源:https://my.oschina.net/c5ms/blog/1827907

29820
来自专栏云计算

Go 微服务第 9 章:基于 RabbitMQ 和 AMQP 进行消息传递

原文地址:https://dzone.com/articles/go-microservices-blog-series-part-9-messaging-wi...

1.5K100
来自专栏hotqin888的专栏

如何在 Windows 上 使用 ONLYOFFICE 协作编辑文档

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

32720
来自专栏用户1191492的专栏

JClouds的命令行界面

我已经使用JCloud(一种面向Java支持多种云的工具集)一年了。到目前为止,我已经在很多领域广泛地使用了JCloud,特别是在Fuse Eco...

33090
来自专栏Android开发实战

Android O 行为变更官方指南

Android O 除了提供诸多新特性和功能外,还对系统和 API 行为做出了各种变更。本文重点介绍您应该了解并在开发应用时加以考虑的一些主要变更。

12320
来自专栏along的开发之旅

Android逆向分析概述

学习逆向的初衷是想系统学习Android下的hook技术和工具, 想系统学习Android的hook技术和工具是因为Android移动性能实战这本书. 这本书里...

19730
来自专栏互联网高可用架构

Java服务化系统线上应急和技术攻关,你必须拥有的那些应用层脚本和Java虚拟机命令

35630
来自专栏编程

6款好用的C语言编译器推荐

一些刚开始接触C语言编译的网友想下载一款C语言编译器来使用,不过,网络上有不少C语言编译器相关的软件,让人很难抉择。那么,C语言编译器哪个好?今天的文章里,我给...

1.1K80

扫码关注云+社区

领取腾讯云代金券