-1

I am learning to React development. I build an application using react and redux. Recently I have added material-ui and material-table into my project and it seems that material-table is overriding my redux actions and states in Redux DevTools. The application it selves is working fine. The problem is just with Redux DecTools. I tried to google it but without success. Thanks for any hints or directions.

When i use material-table i can see this in Redux devtools

In case i use MUIDataTable instead i can see my redux states Čau Honza

Jan Maštalíř
  • 71
  • 1
  • 5

3 Answers3

2

Yes, material-table mutates the data by adding a tableData object it.

Its a long known problem, but the author does not want to change it yet.

The best way to handle it, is to make a shallow copy of your data before passing it to the table to prevent the mutation of the redux data:

const tableData = data.map(row => ({...row}));

And wrap that in a useState/useEffect to only execute it, if data changes.

PR and Discussion

Domino987
  • 8,475
  • 2
  • 15
  • 38
  • thank you for the answer but it didn't help unfortunately. – Jan Maštalíř Apr 25 '20 at 12:56
  • Can you share you code so I can see what's going on? – Domino987 Apr 25 '20 at 13:05
  • i tried to make it as simple as possible so i removed all data from table and still it overrides the state in redux dev tools. The only states i can see when i use the material-table is: phase(pin):"IDLE" completed(pin):null shouldFlush(pin):false – Jan Maštalíř Apr 25 '20 at 13:16
  • i have just put here the whole material-table component in very basic form. When i use this component it overrides my redux data. – Jan Maštalíř Apr 25 '20 at 13:23
  • That should not affect your dev tools at all. Can you show us what happens. maybe with a screenshot – Domino987 Apr 26 '20 at 08:49
  • i have added printscreens. I tried to use MUIDataTable instead and it works fine however i would like to understand what is wrong with material-table. – Jan Maštalíř Apr 26 '20 at 15:09
  • 1
    Did you try selecting a redux instance as written on the top of your screen shot? I think its connected to react-hot-loader, which might interfere with the selection. – Domino987 Apr 26 '20 at 15:17
  • Bingo! It is there. I can see there three instances, all of them are called React app. When i select the first one i can see my data. Do you know what are the others about? – Jan Maštalíř Apr 26 '20 at 16:27
0

This is my material-table component:

import React, { useEffect, useState } from 'react';
import MaterialTable from "material-table";

import { forwardRef } from 'react';

import AddBox from '@material-ui/icons/AddBox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';
import Check from '@material-ui/icons/Check';
import ChevronLeft from '@material-ui/icons/ChevronLeft';
import ChevronRight from '@material-ui/icons/ChevronRight';
import Clear from '@material-ui/icons/Clear';
import DeleteOutline from '@material-ui/icons/DeleteOutline';
import Edit from '@material-ui/icons/Edit';
import FilterList from '@material-ui/icons/FilterList';
import FirstPage from '@material-ui/icons/FirstPage';
import LastPage from '@material-ui/icons/LastPage';
import Remove from '@material-ui/icons/Remove';
import SaveAlt from '@material-ui/icons/SaveAlt';
import Search from '@material-ui/icons/Search';
import ViewColumn from '@material-ui/icons/ViewColumn';

const tableIcons = {
    Add: forwardRef((props, ref) => <AddBox {...props} ref={ref} />),
    Check: forwardRef((props, ref) => <Check {...props} ref={ref} />),
    Clear: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Delete: forwardRef((props, ref) => <DeleteOutline {...props} ref={ref} />),
    DetailPanel: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    Edit: forwardRef((props, ref) => <Edit {...props} ref={ref} />),
    Export: forwardRef((props, ref) => <SaveAlt {...props} ref={ref} />),
    Filter: forwardRef((props, ref) => <FilterList {...props} ref={ref} />),
    FirstPage: forwardRef((props, ref) => <FirstPage {...props} ref={ref} />),
    LastPage: forwardRef((props, ref) => <LastPage {...props} ref={ref} />),
    NextPage: forwardRef((props, ref) => <ChevronRight {...props} ref={ref} />),
    PreviousPage: forwardRef((props, ref) => <ChevronLeft {...props} ref={ref} />),
    ResetSearch: forwardRef((props, ref) => <Clear {...props} ref={ref} />),
    Search: forwardRef((props, ref) => <Search {...props} ref={ref} />),
    SortArrow: forwardRef((props, ref) => <ArrowDownward {...props} ref={ref} />),
    ThirdStateCheck: forwardRef((props, ref) => <Remove {...props} ref={ref} />),
    ViewColumn: forwardRef((props, ref) => <ViewColumn {...props} ref={ref} />)
  };

const MyTable = () => {

    return (
        <div style={{ maxWidth: "100%" }}>
        <MaterialTable   icons={tableIcons}     
          columns={[

            { title: "Department", field: "department" },
            { title: "Name", field: "name" },
            { title: "Status", field: "status" },
            { title: "Start Date", field: "startDate", type: "date" },

          ]}
          data={[]}
          title="Demo Title"
        />
      </div>
    )

}

export default MyTable;
Jan Maštalíř
  • 71
  • 1
  • 5
0

It seems you want to see your states. You can view your states by navigating to it with the dropdown menu on the top right corner, where it says "Autoselect instances".

Dforrunner
  • 34
  • 4