如何为React Redux应用程序，创建可编辑的数据网格（一）

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

发布于 2020/04/02 21:32

近日，前端 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部门的生产效率，欢迎访问官网，下载试用。

葡萄城热门产品