React-Redux

Wijmoは、Reactの本格的なサポートに加えて、一方向のデータフローとデータの不変性の要件を備えたReduxの専用サポートも提供します。

Reduxは、アプリケーションでデータを処理する方法に追加の制限を課します。 これは、コンポーネントが消費するソースデータを直接変更できないことにあります。 代わりに、データの変更に関する情報をRedux Storeにディスパッチして、Redux reducersが実際にデータを変更できるようにする必要があります。 その後、UIコントロールは新しく変更されたデータで更新されます。

この特定のワークフローは、InputNumberやDateEditなどの単純なUI入力コンポーネントでは問題になりません。 この場合、コントロールのvalueプロパティは親コンポーネントプロパティにバインドされ、valueChangedイベントは、ローカルデータを変更する代わりに、データ変更アクションをStoreにディスパッチするために使用されます。

この問題は、基になるデータを直接変更するように設計された編集可能なデータグリッドなどの複雑なコントロールで発生します。 この機能は、データの不変性に関するReduxの要件と矛盾します。 その結果、通常のReactアプリケーションで正常に機能する編集可能なFlexGrid コンポーネントは、Reduxアプリケーションでのデータ編集には使用できなくなり、読み取り専用のデータグリッドとしてのみ使用できます。

Wijmoでは、この問題を解決するためのソリューションを提供しており、基礎となるデータの直接変異を防ぎつつ、FlexGridのデータ編集機能を維持することができます。このソリューションを利用することで、ReduxアプリケーションでもFlexGridをデータ編集に利用することができます。

必要な機能は、FlexGridコンポーネントにアタッチされている ImmutabilityProviderコンポーネントを使用して実現でき、次のように動作を変更します。

FlexGridコンポーネントにアタッチされているものは、次のように動作を変更します。

• FlexGridがユーザーの編集に応じて基になるデータ配列を変更するのを防ぎます。
• データ変更アクションをRedux Storeにディスパッチするために使用されるデータ変更イベントをトリガーします。

次に、データはRedux reducersを通過し、グリッドに戻って変更を反映します。 しかし、この複雑なデータフローはすべて、ユーザーエクスペリエンスに影響を与えません。 エンドユーザーにとっては、すべてが通常のグリッドを編集しているかのように見えます。これにより、基になるデータが直接更新されます。

Editable Redux Gridサンプルを使用して、ImmutabilityProviderの動作を確認します。 そのAPIについては、ImmutabilityProvider のドキュメントを参照してください。 このブログでは、React-Reduxアプリケーションで ImmutabilityProviderを使用する方法について詳しく説明しています。