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

[GrapeCityChina]

开发人员为何如此钟情于 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 部门的生产效率，欢迎访问官网，下载试用。

---