V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
GrapeCityChina
V2EX  ›  React

如何为 React Redux 应用程序,创建可编辑的数据网格(一)

  •  
  •   GrapeCityChina ·
    GrapeCity · 2020-04-08 16:58:12 +08:00 · 1204 次点击
    这是一个创建于 1450 天前的主题,其中的信息可能已经有所发展或是发生改变。

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


    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3562 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 04:57 · PVG 12:57 · LAX 21:57 · JFK 00:57
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.