どのようにReact Reduxアプリケーションのために編集可能なデータグリッドを作成しますか?

4272 ワード

ブドウ城のコントロール react.js 先端 javascript

最近、フロントエンドUIコンポーネントライブラリWijmoJS V 200.0 Update 1が正式に発表されました.常に最適化されたデータエンジンを提供し、大データ量の高速レンダリングを実現するほか、このバージョンの最大のハイライトは「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コンポーネントに適用した後、以下のように動作を変更します.

は、すべてのデータ編集機能を保持しながら、データの基礎データの変更を防止する.つまり、ユーザはすべての可能な方法でFlexGridによってデータを編集することができるが、Redux Storeの基礎データ配列は依然として不変である.

ユーザがFlexGridでデータを編集すると、ImmutabilityProviderは、変更に関する情報を含む特殊イベントをトリガし、このイベントはデータ変更操作をReduxに割り当てて記憶することができる.

これから、どうやって働いているかを見てみましょう.
Immutability Provider
コンポーネントのrender方法において、データバインディングを追加する最も簡単なJSX方法は、このように見える.

データをDataGridで編集すると、DataGridは、そのitems Source属性に結合されたデータ配列を変更します.この挙動を変更し、FlexGridを強制的に停止させるには、以下のようにImmutabilityProvider ReactコンポーネントをFlexGridコンポーネントに組み込みます.

なお、現在はImmutabilityProviderコンポーネントにitems Source属性が指定されていますが、FlexGridでは指定されていません.
また、data Changedイベントのために、ユーザー編集によるDataGridで発生する可能性のある3つのデータ変更のタイプについても通知する処理手順を定義しました.

既存項目の属性値が変更されました.

新しいプロジェクトが追加されました.

項目は削除されました.

このイベントを有効にすると、データが変更されているように見えますが、実際の基礎項目配列はそのまま維持されます.
このイベントを使って、対応するデータ変更操作を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.items Source属性に結合されているので、後者は変更を検出し、FlexGridにその内容を更新させて記憶中の変更を反映する.
複雑に見えるが、かなり大きなデータにおいても、ユーザの変更はすぐに実行されます.
この方法により、データ編集コントロールとしてReduxアプリケーションでdatagridを使用するのは、使用値入力コントロール(例えば、InputNumber、InputDateなど)とほぼ同じように簡単である.コントロール値属性をグローバル状態属性に変更し、コントロールの「値が変更された」イベントでは、新しい値の操作を行う.
どのようにDataGridを使用してRedux Store内の配列を表示し編集するかの簡単な例については、以下に詳細に説明する.クリックしてを歓迎する.
もしあなたもWijmoJSの先端開発キットを利用して、企業のIT部門の生産効率を更に向上させたいならば、ホームページを訪問して、試用をダウンロードすることを歓迎します.

AnglarのObject.assign