unable to create two instance of KaReducer for two Table Grid

[chiragmewada]

Getting error Error in /ka-table/Utils/ColumnUtils.js (8:19) Cannot read properties of undefined (reading 'field')

import React from 'react'; import { Provider, useDispatch, useSelector } from 'react-redux'; import { combineReducers, createStore } from 'redux';

import { ITableProps, kaReducer, Table } from 'ka-table'; import { DataType, EditingMode, SortingMode } from 'ka-table/enums';

const dataArray = Array(30) .fill(undefined) .map((_, index) => ({ column1: column:1 row:${index}, column2: column:2 row:${index}, column3: column:3 row:${index}, column4: column:4 row:${index}, id: index, }));

const initialTableOption: ITableProps = { columns: [ { key: 'column1', title: 'Column 1', dataType: DataType.String }, { key: 'column2', title: 'Column 2', dataType: DataType.String }, { key: 'column3', title: 'Column 3', dataType: DataType.String }, { key: 'column4', title: 'Column 4', dataType: DataType.String }, ], data: dataArray, editingMode: EditingMode.Cell, rowKeyField: 'id', sortingMode: SortingMode.Single, };

const initialTableOption1: ITableProps = { columns: [ { key: 'column5', title: 'Column 5', dataType: DataType.String }, { key: 'column6', title: 'Column 6', dataType: DataType.String }, { key: 'column7', title: 'Column 7', dataType: DataType.String }, { key: 'column8', title: 'Column 8', dataType: DataType.String }, ], data: dataArray, editingMode: EditingMode.Cell, rowKeyField: 'id', sortingMode: SortingMode.Single, };

const combinedReducer = combineReducers({ tablePropsInit: (state = initialTableOption, action) => kaReducer(state, action), tablePropsInit1: (state = initialTableOption, action) => kaReducer(state, action), }); const store = createStore( combinedReducer, (window as any).REDUX_DEVTOOLS_EXTENSION && (window as any).REDUX_DEVTOOLS_EXTENSION() );

const ReduxTableComponent = () => { const tablePropsInit = useSelector((state: any) => state.tablePropsInit); const tablePropsInit1 = useSelector((state: any) => state.tablePropsInit1); const dispatch = useDispatch(); return ( <> <Table {...tablePropsInit} dispatch={dispatch} />

  <Table {...tablePropsInit1} dispatch={dispatch} />
</>

); };

const ReduxDemo: React.FC = () => { return (

); };

export default ReduxDemo;

[komarovalexander]

Hi @chiragmewada can you reproduce it on stackblitz? https://stackblitz.com/edit/table-redux-ts-rvad9n?file=Demo.tsx

[chiragmewada]

Hi @komarovalexander,

Thank you for taking time. if you try to change the value of cell you will see the error.

On Mon, Nov 6, 2023 at 12:27 PM Alexander Komarov @.***> wrote:

Hi @chiragmewada https://github.com/chiragmewada can you reproduce it on stackblitz? https://stackblitz.com/edit/table-redux-ts-rvad9n?file=Demo.tsx

— Reply to this email directly, view it on GitHub https://github.com/komarovalexander/ka-table/issues/352#issuecomment-1795580973, or unsubscribe https://github.com/notifications/unsubscribe-auth/AC2YU3A4MLMK2UHRLDYZ6RTYDEMYFAVCNFSM6AAAAAA65AUR7SVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTOOJVGU4DAOJXGM . You are receiving this because you were mentioned.Message ID: @.***>

[komarovalexander]

it happens because dispatch executes for both tables in provided example. you just need to split reducers logic (no need to execute reducer for both tables if change is for one table only), example: https://stackblitz.com/edit/table-redux-ts-qdts2m?file=Demo.tsx

[chiragmewada]

Thank you @komarovalexander I will use this workaround!