unable to create two instance of KaReducer for two Table Grid
Closed this issue · 4 comments
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;
Hi @chiragmewada can you reproduce it on stackblitz? https://stackblitz.com/edit/table-redux-ts-rvad9n?file=Demo.tsx
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
Thank you @komarovalexander I will use this workaround!