2019给前端的5个建议

2019 农历新年即将到来，是时候总结一下团队过去一年的技术沉淀。过去一年我们支撑的数据相关业务突飞猛进，其中两个核心平台级产品代码量分别达到30+万行和80+万行，TS 模块数均超过1000个，协同开发人员增加到20+人。由于历史原因，开发框架同时基于 React 和 Angular，考虑到产品的复杂性、人员的短缺和技术背景各异，我们尝试了各种方法打磨工具体系来提升开发效率，以下是节选的5项主要方法。

一、基于 Redux 的状态管理

从2013年React发布至今已近6个年头，前端框架逐渐形成 React/Vue/Angular 三足鼎立之势。几年前还在争论单向绑定和双向绑定孰优孰劣，现在三大框架已经不约而同选择单向绑定，双向绑定沦为单纯的语法糖。框架间的差异越来越小，加上 Ant-Design/NG-ZORRO/ElementUI 组件库的成熟，选择任一你熟悉的框架都能高效完成业务。

那接下来核心问题是什么?我们认为是状态管理。简单应用使用组件内 State 方便快捷，但随着应用复杂度上升，会发现数据散落在不同的组件，组件通信会变得异常复杂。我们先后尝试过原生 Redux、分形 Fractal 的思路、自研类 Mobx 框架、Angular Service，最终认为 Redux 依旧是复杂应用数据流处理最佳选项之一。

庆幸的是除了 React 社区，Vue 社区有类似的 Vuex，Angular 社区有 NgRx 也提供了几乎同样的能力，甚至 NgRx 还可以无缝使用 redux-devtools 来调试状态变化。

无论如何优化，始终要遵循 Redux 三原则：

这三个问题我们是通过自研 iron-redux 库来解决，以下是背后的思考：

如何组织 Action?

action type 需要全局惟一，因此我们给 action type 添加了 prefix，其实就是 namespace 的概念

为了追求体验，请求(Fetch)场景需要处理 3 种状态，对应 LOADING/SUCCESS/ERROR 这 3 个action，我们通过 FetchTypes 类型来自动生成对应到 3 个 action

如何组织 Store/Reducer?

• reducer 和 view 不必一一对应，应用中同时存在组件树和状态树，按照各自需要去组织，通过 connect 来绑定状态树的一个或多个分支到组件树
• 通过构造一些预设数据类型来减少样板代码。对于 Fetch 返回的数据我们定义了 AsyncTuple 这种类型，减少了样板代码
• 明确的组织结构，第1层是 ROOT，第2层是各个页面，第3层是页面内的卡片，第4层是卡片的数据，这样划分最深处基本不会超过5层

最终我们得到如下扁平的状态树。虽庞大但有序，你可以快速而明确的访问任何数据。

如何减少样板代码?

使用原生 Redux，一个常见的请求处理如下。非常冗余，这是 Redux 被很多人诟病的原因。

const initialState = { 
  loading = true, 
  error = false, 
  data = []};function todoApp(state = initialState, action) { 
  switch (action.type) { 
    case DATA_LOADING: 
      return { 
        ...state, 
        loading: true, 
        error: false 
      } 
    case DATA_SUCCESS: 
      return { 
        ...state, 
        loading: false, 
        data: action.payload 
      } 
    case DATA_ERROR: 
      return { 
        ...state, 
        loading: false, 
        error: true 
      } 
    default: 
      return state 
  }} 

使用 iron-redux 后：

class InitialState { 
  data = new AsyncTuple(true);}function reducer(state = new InitialState(), action) { 
  switch (action.type) { 
    /** 省略其它 action 处理 */ 
    default: 
      return AsyncTuple.handleAll(prefix, state, action); 
  }} 

代码量减少三分之二!!

主要做了这2点：

• 引入了预设的 AsyncTuple 类型，就是 {data: [], loading: boolean, error: boolean} 这样的数据结构;
• 使用 AsyncTuple.handleAll 处理 LOADING/SUCCESS/ERROR 这 3 种 action，handleAll 的代码很简单，使用 if 判断 action.type 的后缀即可，源码在这里。

（编辑：核心网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!