WijmoJS 是一款基于 HTML5 的前端開發工具包，由 80 多種靈活、高效、跨平臺、零依賴的 JavaScript UI 組件構成，如表格（Grid）、圖表（Chart）、數據分析（Olap）、導航（Navigation）和金融圖表等，完美兼容原生 JavaScript，以及 Angular、React、Vue、TypeScript、Knockout 和 Ionic 等框架，可助力企業以最快的速度開發并構建出一套成熟的 Web 應用程序。

點擊下載WijmoJS正式版

近日，前端 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等）一樣簡單：將控件值屬性更改為全局狀態屬性，并在控件的“值已更改”事件中調度具有新值的操作。

WijmoJS版本亮點持續更新中，感興趣的朋友可以繼續關注慧都網了解更多產品資訊~您可以下載WijmoJS最新版免費試用~