本文将详细介绍：如何创建一个使用DataGrid来显示和编辑Redux Store中数组的简单示例。
WijmoJS 是一款基于 HTML5 的前端开发工具包，由 80 多种灵活、高效、跨平台、零依赖的 JavaScript UI 组件构成，如表格（Grid）、图表（Chart）、数据分析（Olap）、导航（Navigation）和金融图表等，完美兼容原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可助力企业以最快的速度开发并构建出一套成熟的 Web 应用程序。
WijmoJS最新版
近日，前端开发工具包 WijmoJS 发布最新版本 2020v1，将所有组件和功能模块化，更加体现出 WijmoJS 的小巧、灵活和高效。这一版本的最大亮点，就是增加了“可在React Redux 应用程序中，编辑数据网格”。
上文中我们介绍了React Redux是什么，以及前端UI组件库WijmoJS 为何要在本次新版本发布中，增加在React Redux应用程序编辑数据网格的功能。现在，我们将详细介绍：如何创建一个使用DataGrid来显示和编辑Redux Store中数组的简单示例。
举个例子
该示例遵循标准的React-Redux应用程序结构，但采用了扁平化的文件夹结构，以使其更适合WijmoJS的在线演示站点。另外，由于示例站点对演示站点的要求，因此它使用SystemJS运行时加载器加载模块，而不是Webpack或类似的捆绑程序。
该应用程序具有一个包含两个FlexGrid控件的单一视图。
最上面的是由ImmutabilityProvider组件控制的可编辑DataGrid，该组件已从Redux Store绑定到阵列。这是用于检查功能的DataGrid（我们在本文中讨论的内容）。您可以通过从键盘上键入单元格值来编辑单元格值，使用网格行列表末尾的“新行”行来添加新项，或者通过选择它们并按Delete键来删除项。
您还可以粘贴剪贴板中的数据，或清除所选单元格区域中的多个单元格值。
值得一提的是，要使用Object.freeze() 函数冻结datagrid中显示的数据数组中的所有项目，以确保执行编辑时datagrid不会让数据改变。
除了编辑之外，您还可以根据需要转换数据-单击列标题进行排序，将列标题拖到datagrid上方的组面板中进行分组，然后单击列标题中的过滤器图标进行过滤。
第二个DataGrid是只读的。它不使用ImmutabilityProvider，而是使用其itemsSource属性直接绑定到商店的数组。该DataGrid可以帮助您检查通过顶部DataGrid所做的更改如何应用于Redux Store。
顶部DataGrid上方还有一个菜单，可用于更改数据阵列的大小。小型阵列可方便地检查您的更改如何应用于商店。更大的数组可用于评估编辑过程的性能。您可以选择一些与实际应用中期望的项目相似的项目，并评估其工作方式。
状态定义 State
最初的应用程序全局状态在reducers.jsx文件中定义如下：
const itemCount = 5000;const initialState = { itemCount, items: getData(itemCount), idCounter: itemCount}
它包含具有随机生成的items数组，以及几个辅助属性-itemCount和idCounter，这些属性定义数组中的项数，而idCounter存储唯一的id值，该id值分配给新添加项的id属性。
items数组是由示例的DataGrid表示的数组，使用Object.freeze（）函数冻结数组中的每个项目，以确保真正满足Redux提出的数据不变性要求。
事件 Actions
Redux操作创建者函数在actions.jsx文件中定义：
export const addItemAction = (item) => ({ type: 'ADD_ITEM', item});export const removeItemAction = (item, index) => ({ type: 'REMOVE_ITEM', item, index});export const changeItemAction = (item, index) => ({ type: 'CHANGE_ITEM', item, index});export const changeCountAction = (count) => ({ type: 'CHANGE_COUNT', count});
有3个事件用于更改项目数组（ADD_ITEM，REMOVE_ITEM和CHANGE_ITEM）的操作，还有一个附加的CHANGE_COUNT事件，可使商店创建具有不同数量的全新项目数组。
每个事件都依赖于“action creator”事件。在ImmutabilityProvider.dataChanged事件处理程序（在GridView表示组件中）中调用这些函数，以通知商店有关datagrid中所做的数据更改。
对于项目更改操作，index属性包含items数组中受影响的索引项目， item属性保存了对item对象的引用。
Reducer
应用程序根据上述动作定义一个单例的Reducer，对执行器全局状态进行更新。它在reducers.jsx文件中定义：
export const appReducer = (state = initialState, action) => { switch (action.type) { case 'ADD_ITEM': { // make a clone of the new item which will be added to the // items array, and assigns its 'id' property with a unique value. let newItem = Object.freeze(copyObject({}, action.item, { id: state.idCounter })); return copyObject({}, state, { // items array clone with a new item added items: state.items.concat([newItem]), // increment 'id' counter idCounter: state.idCounter + 1 }); } case 'REMOVE_ITEM': { let items = state.items, index = action.index; return copyObject({}, state, { // items array clone with the item removed items: items.slice(0, index).concat(items.slice(index + 1)) }); } case 'CHANGE_ITEM': { let items = state.items, index = action.index, oldItem = items[index], // create a cloned item with the property changes applied clonedItem = Object.freeze(copyObject({}, oldItem, action.item)); return copyObject({}, state, { // items array clone with the updated item items: items.slice(0, index). concat([clonedItem]). concat(items.slice(index + 1)) }); } case 'CHANGE_COUNT': { // create a brand new state with a new data let ret = copyObject({}, state, { itemCount: action.count, items: getData(action.count), idCounter: action.count }); return ret; } default: return state; }}
根据Redux的要求，我们不会对现有项目数组及其项目的属性进行修改。如果添加或删除项目，会首先创建添加或删除该项目的克隆。如果该操作要求我们更新现有项目，我们将创建一个新的数组，将更新后的项替换为更改项的克隆。
我们使用 @ grapecity / wijmo.grid.immutable模块中的copyObject函数来克隆对象。如果它是由浏览器实现的，它将有效地使用Object.assign函数；如果没有，则使用自定义实现（例如，在IE中）。
要处理REMOVE_ITEM和CHANGE_ITEM操作，我们需要知道items数组中受此更改影响的现有项目及其索引。在此示例中，我们使用最简单，也是最快的方法来执行此操作：该项目的索引在操作数据的index属性中传递（ImmutabilityProvider.dataChanged事件为您带来此信息！）。
如果上述方法不起作用，则可以在操作数据时传递将要更改的原始项目，并使用items.indexOf（）方法找到其索引，或按商品ID搜索。
对于CHANGE_ITEM操作，您不仅需要知道将要更改的现有项目，还需要知道该项目的新属性值。通过为您提供包含新项目属性值的克隆对象，ImmutabilityProvider.dataChanged事件的数据也带来了此信息，此克隆对象在操作的item属性中传递，并且由reducer用于创建具有新属性值的新克隆项目，以在克隆items数组中使用它而不是旧的对象。
请注意，对于添加到克隆项数组中的任何克隆项，我们调用Object.freeze以保护该项免于意外情况。
本文内容尚未完结，请持续关注我们后续内容！感兴趣的朋友可以下载WijmoJS最新版免费试用~
相关内容推荐：
WijmoJS 2020v1 版本亮点：在React Redux 应用程序中，编辑数据网格（上）
想要购买WijmoJS正版授权，或了解更多产品信息请点击【咨询在线客服】
标签：
来源：慧都
声明：本站部分文章及图片转载于互联网，内容版权归原作者所有，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！