带有Redux切片的TS : valueService.js:205未捕获TypeError:无法分配给对象“”#<Object>“”的只读属性“”dis“”

Question

我似乎找不到导致上述问题的原因，也无法正确调试。根据我对Redux切片的理解，由于内置的Immer功能，我能够在我的reducer中直接改变状态。如果我将redux JSON硬编码到UI组件中，没有任何问题让我相信这是Redux的问题。任何建议都将不胜感激。

Slice.ts

interface LoadSchedulerState {
  gridData: DataRow[] | null,
}
interface DataRow {
  id: number,
  dis: string,
  hour: string
}

const initialState: LoadSchedulerState = {
  gridData: null,
}

export const loadSchedulerSlice = createSlice({
  name: 'load_scheduler',
  initialState,
  reducers: {
    updateGridData: (state, action:  PayloadAction<DataRow>) => {
      let newData = [{...action.payload}]
      return {...state, gridData:newData}
    },
  },
});

export const {updateGridData} = loadSchedulerSlice.actions;
export const gridData = (state: { loadScheduler: { gridData: any; }; }) => state.loadScheduler.gridData;
export default loadSchedulerSlice.reducer;

LoadScheduler.ts

import { AgGridColumn, AgGridReact } from "@ag-grid-community/react";
import HeaderGroupComponent from "./HeaderGroupComponent.jsx";
import LoadHeaderComponent from "./LoadHeaderComponent.jsx";
import BtnCellRenderer from './BtnCellRenderer';
import {
  AllModules,
  ColumnApi,
  GridApi,
  GridReadyEvent,
} from "@ag-grid-enterprise/all-modules";
import "../../styles/DemoGrid.css";
import { updateGridData, gridData } from "./loadSchedulerSlice";
import { useDispatch, useSelector } from 'react-redux';

const LoadSchedulerGrid = () => {
  const [gridApi, setGridApi] = useState<GridApi>();
  const [columnApi, setColumnApi] = useState<ColumnApi>();
  const [rowData, setRowData] = useState<any>(null);
  const gridStateData = useSelector(gridData);
  const dispatch = useDispatch();
  
  // PUSH TABLE CHANGES VIA WEBSOCKET TO BACKEND 
  const handleCellChange = (event: any) => {
    
  }


  var init_data = {   
    id: 0,
    dis: "Mon 10/19 8:09 A",
    hour: "8 a"
  }

  const dataSetter = (params: { newValue: any; data: any; }) => {
    params.data.dis = params.newValue;
    return false;
  };
  
  const onGridReady = (params: GridReadyEvent) => {
    dispatch(updateGridData(init_data))
    setGridApi(params.api);
    setColumnApi(params.columnApi);
  };

  return (
    <div className="ag-theme-alpine demo-grid-wrap">
      <AgGridReact
        onGridReady={(params) => {
          onGridReady(params);
        }}
        immutableData={true}
        rowData={gridStateData}
        getRowNodeId={node => node.id}
        modules={AllModules}
        onCellValueChanged={handleCellChange}
        defaultColDef={{
          resizable: true,
          sortable: true,
          filter: true,
          headerComponentFramework: LoadHeaderComponent,
          headerComponentParams: {
            menuIcon: "fa-bars",
          },
        }}
      >

        <AgGridColumn headerName="#" width={50} checkboxSelection sortable={false} suppressMenu filter={false} pinned></AgGridColumn>

        <AgGridColumn headerName="Load Details" headerGroupComponentFramework={HeaderGroupComponent}>
          <AgGridColumn field="dis" width={110} headerName="Dispatch" editable  cellClass="dispatch" valueSetter={dataSetter} />
          <AgGridColumn field="hour" width={50} headerName="Hour" cellClass="hour" />
        </AgGridColumn>

      </AgGridReact>
    </div>
  );
};

const rules = {
  dc_rules:{
    "cell-blue": (params: { value: string }) => params.value === 'ERD',
    "cell-beige": (params: {value: string }) => params.value === 'PDC',
    "cell-cyan": (params: {value: string }) => params.value === 'CRD'
  },
  nr_cube_rules:{
    "cell-red": (params: {value: number }) => params.value > 10.0
  }
}

export default LoadSchedulerGrid;

Answer 1

Ag-grid per default会尝试在reducer之外直接改变状态对象。必须使用Ag-Grids immutableData设置。

https://www.ag-grid.com/javascript-data-grid/immutable-data/

他们甚至有一篇关于在Ag-Grid中使用RTK的博客文章(即使他们在reducers中使用不可变的逻辑-在RTK reducers中，这不是必须的，正如您正确地指出的那样)：https://blog.ag-grid.com/adding-removing-rows-columns-ag-grid-with-react-redux-toolkit/