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.