如何爲React Redux應用程序，創建可編輯的數據網格（一）

近日，前端 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部門的生產效率，歡迎訪問官網，下載試用。

---