ag-grid cell edit and update is slow on a react redux-toolkit application

Viewed 17

I'm trying to edit an ag-grid row and then using the valueSetter function to update the data in store in a react redux-toolkit application. Inside the valueSetter function called the dispatch and pass the reducer function.

const defaultColDef = useMemo<ColDef>(() => {
return {
valueSetter: (params: ValueSetterParams) => {
        dispatch(
          updateRowData({
            id: params.data.id,
            field: params.colDef.field!,
            newValue: params.newValue,
          })
        );
        return false; // cell won't mutate state on it's own!?
      },
    };
  }, []);

Here I'm passing id, field and newValue to update the store. In the redux slice file, the updateRowData reducer is defined as

reducers: {
    updateRowData: (state, action: Action) => {
      state.rowData = state.rowData.map((data) =>
        data.id === action.payload.id
          ? { ...data, [action.payload.field]: action.payload.newValue }
          : data
      );
    },
  },

The cell gets updated but with a small delay. Is this due to the logic inside the reducer function as the row data is a sample one with only 10 rows and 10 columns. Any help, suggestions would be really helpful.

0 Answers
Related