近日,前端 UI 组件库 WijmoJS V2020.0 Update1 正式发布!除了提供不断优化的数据引擎,实现大数据量高速渲染外,这一版本的最大亮点,就是增加了“可在React Redux 应用程序中,编辑数据网格”。

React Redux是什么?WijmoJS 增加的此项功能对于前端开发者来说意味着什么?本篇技术博客,会告诉你答案。

开发人员为何如此钟情于Redux?

Redux是当今流行的应用程序架构,尤其是在React社区中。

它鼓励开发人员使用单向数据流,并使用Redux reducer在全局Redux Store中更改应用于单个位置的数据。可以肯定的是,该体系结构使应用程序更可靠,更易于维护 —— 这就是为什么许多开发团队选择将Redux作为应用程序基础架构的主要原因。

在使用Redux 时,需要注意:数据的所有更改都必须通过克隆Redux reducer中现有的数据来进行。

  • 如果需要将项目添加到数组中,则应使用添加的新项目创建此数组的副本
  • 如果需要更改项目属性,则应创建此项目的副本,其中包含此属性的新值
  • 您永远不应更改现有的数组和对象

因此,想实现类似 Excel 那样的数据编辑方式,在React Redux 应用程序中将变得不那么容易。

Redux 与 DataGrid 组件之间的矛盾

DataGrid组件,又称为数据网格组件,其主要功能是允许用户像在Microsoft Excel中一样编辑数据。

DataGrid组件在设计之初,定位为直接更改绑定数据。这对于“常规”应用程序来说,可以满足需求,但是由于数据不变性的要求,它不能与Redux一起使用。

假设此时,您想使用基于Redux的高级应用程序架构,又希望将可编辑的DataGrid作为应用程序UI的一部分。该怎么办?

  • 如果要使用Redux 创建酷炫的UI,则必须放弃可编辑的DataGrid
  • 如果放弃了可编辑的DataGrid,则应用程序提供的用户体验会大幅下降

有没有一种可能,将Redux 与DataGrid 可编辑组件结合使用?

WijmoJS 的回答是:有!

WijmoJS 的 FlexGrid 组件与 Redux

WijmoJS的 FlexGrid表格组件,可将网格绑定到数据源,并允许您选择数据项的数量、数据显示模式、数据类型,以及是否使用数据映射和格式。即使有大量数据项,FlexGrid 网格仍然可以保持快速流畅。

为了将Redux 与可编辑网格组件结合使用,WijmoJS引入了一个非常易用的扩展组件,称为ImmutabilityProvider。

在应用于FlexGrid组件后,它将通过以下方式更改其行为:

  • 在保留所有数据编辑功能的同时,防止datagrid更改基础数据。也就是说,用户可以以所有可能的方式通过FlexGrid编辑数据,但是Redux Store中的基础数据数组仍然是不变的。
  • 当用户在FlexGrid中编辑数据时,ImmutabilityProvider会触发一个特殊事件,其中包含有关更改的信息,该事件可用于将数据更改操作分派到Redux存储。

下面,让我们看看它是如何工作的。

ImmutabilityProvider

在组件的render方法中,添加数据绑定最简单的JSX方法看起来像这样:

<FlexGrid itemsSource={this.props.items}>
</FlexGrid>

当用户通过DataGrid编辑数据时,DataGrid将更改绑定到其itemsSource属性的数据数组。要更改此行为并强制FlexGrid停止对基础数据的影响,我们将ImmutabilityProvider React组件嵌套在FlexGrid组件中,如下所示:

<FlexGrid>
    <ImmutabilityProvider 
        itemsSource={this.props.items}
        dataChanged={this.onGridDataChanged} />
</FlexGrid>

请注意,现在在ImmutabilityProvider组件上指定了itemsSource属性,但未在FlexGrid上指定。

此外,我们还为dataChanged事件定义了一个处理程序,该处理程序通知我们有关由于用户编辑而在DataGrid中发生的三种可能的数据更改类型:

  • 现有项目的属性值已更改
  • 新项目已添加
  • 项目已删除

触发此事件后,尽管看起来数据已发生更改,但实际基础项数组保持不变(数组本身及其项的属性)。

我们使用此事件将相应的数据更改操作调度到Redux Store,以将用户所做的更改应用于全局应用程序状态。

事件处理程序如下:

onGridDataChanged(s: ImmutabilityProvider, e: DataChangeEventArgs) {
    switch (e.action) {
        case DataChangeAction.Add:
            this.props.addItemAction(e.newItem);
            break;
        case DataChangeAction.Remove:
            this.props.removeItemAction(e.newItem, e.itemIndex);
            break;
        case DataChangeAction.Change:
            this.props.changeItemAction(e.newItem, e.itemIndex);
            break;
        default:
            throw 'Unknown data action'
    }
}

根据在FlexGrid中发生的数据更改的类型(添加、删除或更改),事件处理程序将向Redux Store的reducer调度相应的操作,后者将使用包含分派的更改数组的克隆更新全局状态。

由于此数组直接绑定到ImmutabilityProvider.itemsSource属性,后者将检测到更改并让FlexGrid刷新其内容以反映存储中发生的更改。

尽管看似复杂,但即使在相当大的数据上,用户所做的更改也可立即生效。

通过这种方法,在Redux应用程序中将datagrid用作数据编辑控件几乎与使用值输入控件(例如InputNumber、InputDate等)一样简单:将控件值属性更改为全局状态属性,并在控件的“值已更改”事件中调度具有新值的操作。

关于如何创建一个使用DataGrid来显示和编辑Redux Store中数组的简单示例,将在下文中详细介绍,欢迎点击阅读

如果您也希望借助WijmoJS的前端开发工具包,进一步提升企业IT部门的生产效率,欢迎访问官网,下载试用。