Integration with Redux Toolkit (RTK and RTK Query)?

[Stanislav Dimov]

I am looking for the proper way to integrate RTK and RTK Query with the Data Grid control.

I found a couple of old tutorials (such as this one) which show how to integrate with react-redux, however, this is not what I am looking for.

Suppose I have the following:

```

import * as React from 'react';

import './App.css';

import { ColumnDirective, Edit, ColumnsDirective, Filter, GridComponent, Inject, Page, Sort, Toolbar } from '@syncfusion/ej2-react-grids';

import { useMyQuery, useMyMutation } from "./rtk-api"

const editOptions = { allowEditing: true, allowAdding: true, allowDeleting: true };

const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

const App = () => {

// Standard RTK query which:

// 1. Fetches initial data on component load and saves it in cache

// 2. Automatically updates data cache through incoming WebSocket packets

const { data, isLoading, isSuccess, isError, error } = useMyQuery();

// Standard RTK mutation, used to send changes in the datagrid to the backend

const [updateData,

{

data: responseData,

isUninitialized: responseIsUninitialized,

isLoading: responseIsLoading,

error: responseError,

}

] = useMyMutation();

// Should return a DataGrid which can:

// 1. Show data fetched from the RTK query on load

// 2. Show new data when it arrives though a WebSocket packet

// 3. Send user CRUD operations over the data via the RTK mutation

return (

<GridComponent dataSource={data} allowSorting={true} editSettings={editOptions} toolbar={toolbarOptions} allowFiltering={true} allowPaging={true}>

<ColumnsDirective>

<ColumnDirective field='OrderID' headerText='Order ID' width='140' textAlign='Right' validationRules={this.orderidRules} isPrimaryKey={true}></ColumnDirective>

<ColumnDirective field='CustomerID' headerText='Customer Name' width='150' validationRules={this.validationRule}></ColumnDirective>

<ColumnDirective field='Freight' headerText='Freight' width='140' format='C2' textAlign='Right' editType='numericedit' ></ColumnDirective>

<ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' ></ColumnDirective>

</ColumnsDirective>

<Inject services={[Page, Sort, Filter, Edit, Toolbar]} />

)

}

export default App;

```

How can I achieve this?

[Rajapandiyan Settu]

Hi Stanislav, 

Thanks for contacting Syncfusion support.

You can achieve your requirement by using the custom binding feature of the Grid. We would like to share the behavior of custom data-binding in EJ2 Grid.

For every grid action (such as Filter, Page, etc.,), we have triggered the dataStateChange event and, in that event arguments we have sent the corresponding action details(like skip, take, filter field, value, sort direction, etc.,) based on that, you can perform the action in your service and return the data as a result and count object. 

Note: ‘dataStateChange’ event is not triggered at the Grid initial render. So, you need to call your service manually with a pagination query (need to set skip value as 0 and take value based on your pageSize of pageSettings in Grid. If you are not defined pageSize in pageSettings, you need to send the default value 12 ) in renderComplete. Please return the result as “{result: […], count: …}” format
to Grid.

‘dataSourceChanged’ event is triggered when performing CRUD action in Grid. You can perform the CRUD action in your service using action details from this event and, you need to call the endEdit method to indicate the completion of save operation.

Custom-binding: https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding/#custom-binding

Demo: https://ej2.syncfusion.com/react/demos/#/material/grid/custom-binding

Regards,

Rajapandiyan S

[Stanislav Dimov]

Hi Rajapandiyan,

this is great but not exactly what I am looking for.

The data is not stored in the backend. It is generated by a micro service in real time and will be pushed to the frontend through a server​ initiated response with the help of websockets, where it will be saved in the RTK cache. All of this is handled transparently by the RTK query and works fine.

The data ​const of the useMyQuery hook automatically updates with new records every time new records are pushed via a websocket call from the server.

The way I have it set up currently (`dataSource={data}`) causes the grid to re-render every time data changes which also causes it to show a spinning wheel , while it resets it back to its default state.

So to be clear I need to:

1. Show new data as it arrives but not reset the state of the grid, so that for example initiated record edit is not reset, or a selected page is not reset back to page 1
2. mutate data via the `useMyMutation` hook (this does not mutate data on the server, only locally, but in either case the changes are reflected in the data const of useMyQuery​).

[Rajapandiyan Settu]

Hi Stanislav, 

Thanks for your update.

We have created a new ticket under your account for the reported query. We suggest you follow up with that ticket for further updates.

Regards, 

Rajapandiyan S