基于Redux数据状态管理的前端应用实践

秦子实

摘要：在企业中台等复杂交互场景的网页应用中，基于JSP、ASP等模板技术的页应用一直存在着拓展性差、修改维护困难、调试效率低下等问题。因此，对于企业中台等复杂交互场景，需要一种能够完全独立于后端复杂网页应用开发方法，方法应完全基于REST APl，且具备良好的拓展性，各功间能耦合性低，便于后期的迭代及维护。该文将以React框架为例，通过Redux控制数据状态以代替传统基于模板的网页开发，给出一种新的独立复杂交互式前端的开发方法。

关键词：前端;JavaScript;React;Redux

中图分类号：TP393 文献标识码：A

文章编号：1009-3044（2020）08-0254-02

1 概述

随着企业业务的不断扩展，企业中台网页应用需要展示的报表数量越来越多，在网页上进行的数据操作越来越复杂。传统基于模板的网页开发（如JSP、ASP等）越来越难以应付这些复杂功能，基于模板的网页应用由于HTML结构以及表单提交机制等原因，不可避免地会出现页面代码臃肿，数据交换冗余较大。这不仅会占用客户端浏览器资源导致加载缓慢.也会在请求/提交数据时大量消耗服务器资源处理无用数据。

前端框架日趋成熟，更多的企业中台网页应用从原来的模板开发，转移到基于如React或Vue等框架的JavaScript前端网页应用。相较于模板技术，前端应用框架的核心在于状态管理。本文以React框架为例，介绍使用Redux库进行前端应用状态管理，以实现具有良好扩展性、方便修改迭代、易于调试维护的独立前端应用的实现。

2 Redux技术简介

Redux产生的原因，是为了应对功能复杂的JavaScript单页应用，比如在企业中台应用里，我们希望在同一个页面上展示大量数据，生成统计图形和报表，同时也希望操作、处理这些数据，使得数据实时的更新至服务器，并直接将更新结果显示在网页上。传统的模板式网页开发可能就需要大量的表单提交，或是采用大量各不相同的Ajax请求，这不论对于前端的网页渲染，还是后端的API管理，都是非常繁杂的工作，且调试环境复杂，不易定位问题。

对于这种复杂的网页应用，Redux充分利用React等框架基于状态（state）的页面渲染机制，对应用数据状态进行集中的、简洁的管理。同时，Redux基于函数式编程的思想，使用幂等操作，加强了React等框架的状态控制，使得网页应用的行为变得更容易追踪、调试及后期功能拓展。

使用Redux管理应用数据状态，无须引入额外工具或库，仅使用JavaScript自身的JSON数据结构以及普通的函数实现，Redux库本身仅有2k，利于应用打包和发布。Redux在使用中需要注意三个原则：

1）应用数据状态的唯一陛，即一个网页应用有且仅有一个状态对象。该原则不仅使得前后端数据交换更为简洁，也能够大幅降低应用调试难度，有利于持续跟踪应用状态，加速开发流程。

2）应用数据状态是只读对象，即只能够通过发送动作（dis-patch actions）来改变该对象。该原则意味着无论应用界面的改变或是后端返回的请求都无法直接改变该状态对象，任何对状态改变的期望都必须通过发送一个用于改变状态的动作来实现。如此一来，Redux通过严格的依次执行各个动作，实现了状态变更的集中化管理，也同时实现了状态的跟踪、序列化、存储，方便了之后的调试和测试。

3）使用幂等函数改变状态，即使用纯reducer函数改变状态。所谓幂等操作，指于状态无关的数据操作，即无论应用当前处于什么状态，对同样的输入，一定会得到同样的输出。re-ducer函数的输入为原状态和动作，输出为新状态。这种设计极大地增加了应用的拓展性，随着应用功能的复杂，reducer函数可以由原来的一个操作整个状态，逐渐细分为多个分别操作状态树的各个部分。此外，因为reducer是纯粹的幂等函数，我们可以轻松地控制各reducer的执行顺序、传递额外数据或是进行函数复用（如最常见的分页操作）。

3 Redux数据状态控制

本文以React框架为例，使用Redux对React应用的数据状态进行管理。Redux的数据状态流程如图1所示。

3.1 存储及状态对象

网页应用的所有数据均维护在一个存储（store）中，这个存储就是数据的容器：

想要获取当前的数据，就要对存储进行快照，返回的快照就是应用当前的状态（state）：

状态是一个普通的JavaScript对象，用户能够接触到的视图完全取决于状态，在Redux中，状态对象到视图呈现是幂等操作，即一个确定的状态呈现一个确定的视图，而一个确定的视图能够推出一个确定的状态，如图l中的S1过程。

3.2 动作对象

状态的变化能够引起视图的变化，在Redux中，为了保证状态的一致性，状态不能被直接修改，仅能够通过发送动作（ac-tion）对象来变更。动作是一个普通JavaScript对象，其中仅'type'屬性是必须的，表示动作的名称，其他属性均可自定义。例如，向视图中的一个表格添加一行数据：

动作对象通常由视图发出，也就是用户交在视图上的操作期望引起状态改变，比如在视图的表格中点击“增行”插入新的数据，即图l中的E-AI-A2过程：由视图产生交互事件E（Event），进而发送一个动作对象A1。此外，服务端返回的数据也可以通过发送动作对象引起状态变化，比如视图定期请求服务器获取最新的表格数据，服务器返回并渲染在视图中，即图1中的req-res-A2过程。

视图和服务端要进行多少操作，就需要产生有多少动作对象，我们通常会编写一个函数用于快捷的生成这些动作，这个函数也称作动作生成器（action creator）：