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

點擊下載WijmoJS正式版

近日，前端 UI 組件庫 WijmoJS V2020.0 Update1 正式發(fā)布！除了提供不斷優(yōu)化的數(shù)據(jù)引擎，實現(xiàn)大數(shù)據(jù)量高速渲染外，這一版本的最大亮點，就是增加了“可在React Redux 應用程序中，編輯數(shù)據(jù)網(wǎng)格”。

React Redux是什么？WijmoJS 增加的此項功能對于前端開發(fā)者來說意味著什么？本文將告訴你答案。

開發(fā)人員為何如此鐘情于Redux？

Redux是當今流行的應用程序架構(gòu)，尤其是在React社區(qū)中。

它鼓勵開發(fā)人員使用單向數(shù)據(jù)流，并使用Redux reducer在全局Redux Store中更改應用于單個位置的數(shù)據(jù)?？梢钥隙ǖ氖?，該體系結(jié)構(gòu)使應用程序更可靠，更易于維護 —— 這就是為什么許多開發(fā)團隊選擇將Redux作為應用程序基礎架構(gòu)的主要原因。

在使用Redux 時，需要注意：數(shù)據(jù)的所有更改都必須通過克隆Redux reducer中現(xiàn)有的數(shù)據(jù)來進行。

• 如果需要將項目添加到數(shù)組中，則應使用添加的新項目創(chuàng)建此數(shù)組的副本
• 如果需要更改項目屬性，則應創(chuàng)建此項目的副本，其中包含此屬性的新值
• 您永遠不應更改現(xiàn)有的數(shù)組和對象

因此，想實現(xiàn)類似 Excel 那樣的數(shù)據(jù)編輯方式，在React Redux 應用程序中將變得不那么容易。

Redux 與 DataGrid 組件之間的矛盾

DataGrid組件，又稱為數(shù)據(jù)網(wǎng)格組件，其主要功能是允許用戶像在Microsoft Excel中一樣編輯數(shù)據(jù)。

DataGrid組件在設計之初，定位為直接更改綁定數(shù)據(jù)。這對于“常規(guī)”應用程序來說，可以滿足需求，但是由于數(shù)據(jù)不變性的要求，它不能與Redux一起使用。

假設此時，您想使用基于Redux的高級應用程序架構(gòu)，又希望將可編輯的DataGrid作為應用程序UI的一部分。該怎么辦？

• 如果要使用Redux 創(chuàng)建酷炫的UI，則必須放棄可編輯的DataGrid
• 如果放棄了可編輯的DataGrid，則應用程序提供的用戶體驗會大幅下降

有沒有一種可能，將Redux 與DataGrid 可編輯組件結(jié)合使用？

WijmoJS 的回答是：有！

WijmoJS 的 FlexGrid 組件與 Redux

WijmoJS的 FlexGrid表格組件，可將網(wǎng)格綁定到數(shù)據(jù)源，并允許您選擇數(shù)據(jù)項的數(shù)量、數(shù)據(jù)顯示模式、數(shù)據(jù)類型，以及是否使用數(shù)據(jù)映射和格式。即使有大量數(shù)據(jù)項，F(xiàn)lexGrid 網(wǎng)格仍然可以保持快速流暢。

為了將Redux 與可編輯網(wǎng)格組件結(jié)合使用，WijmoJS引入了一個非常易用的擴展組件，稱為ImmutabilityProvider。

在應用于FlexGrid組件后，它將通過以下方式更改其行為：

• 在保留所有數(shù)據(jù)編輯功能的同時，防止datagrid更改基礎數(shù)據(jù)。也就是說，用戶可以以所有可能的方式通過FlexGrid編輯數(shù)據(jù)，但是Redux Store中的基礎數(shù)據(jù)數(shù)組仍然是不變的。
• 當用戶在FlexGrid中編輯數(shù)據(jù)時，ImmutabilityProvider會觸發(fā)一個特殊事件，其中包含有關更改的信息，該事件可用于將數(shù)據(jù)更改操作分派到Redux存儲。

下面，讓我們看看它是如何工作的。

ImmutabilityProvider

在組件的render方法中，添加數(shù)據(jù)綁定最簡單的JSX方法看起來像這樣：

<FlexGrid itemsSource={this.props.items}>
</FlexGrid>

當用戶通過DataGrid編輯數(shù)據(jù)時，DataGrid將更改綁定到其itemsSource屬性的數(shù)據(jù)數(shù)組。要更改此行為并強制FlexGrid停止對基礎數(shù)據(jù)的影響，我們將ImmutabilityProvider React組件嵌套在FlexGrid組件中，如下所示：

<FlexGrid>
    <ImmutabilityProvider 
        itemsSource={this.props.items}
        dataChanged={this.onGridDataChanged} />
</FlexGrid>

請注意，現(xiàn)在在ImmutabilityProvider組件上指定了itemsSource屬性，但未在FlexGrid上指定。

此外，我們還為dataChanged事件定義了一個處理程序，該處理程序通知我們有關由于用戶編輯而在DataGrid中發(fā)生的三種可能的數(shù)據(jù)更改類型：

• 現(xiàn)有項目的屬性值已更改
• 新項目已添加
• 項目已刪除

觸發(fā)此事件后，盡管看起來數(shù)據(jù)已發(fā)生更改，但實際基礎項數(shù)組保持不變（數(shù)組本身及其項的屬性）。

我們使用此事件將相應的數(shù)據(jù)更改操作調(diào)度到Redux Store，以將用戶所做的更改應用于全局應用程序狀態(tài)。

事件處理程序如下：

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'
    }
}

根據(jù)在FlexGrid中發(fā)生的數(shù)據(jù)更改的類型（添加、刪除或更改），事件處理程序?qū)⑾騌edux Store的reducer調(diào)度相應的操作，后者將使用包含分派的更改數(shù)組的克隆更新全局狀態(tài)。

由于此數(shù)組直接綁定到ImmutabilityProvider.itemsSource屬性，后者將檢測到更改并讓FlexGrid刷新其內(nèi)容以反映存儲中發(fā)生的更改。

盡管看似復雜，但即使在相當大的數(shù)據(jù)上，用戶所做的更改也可立即生效。

通過這種方法，在Redux應用程序中將datagrid用作數(shù)據(jù)編輯控件幾乎與使用值輸入控件（例如InputNumber、InputDate等）一樣簡單：將控件值屬性更改為全局狀態(tài)屬性，并在控件的“值已更改”事件中調(diào)度具有新值的操作。

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