Mutation problem, second click on tree (any item)

[edgarrc]

Browser: Chrome or Firefox SO: Windows 10

We are observing a strange behavior, I tried to flollow your demos and did a lot of research in similar questions, but I could not figure out how to correct this:

The tree shows up fine, but if I click on any row the first time, it presents the log a shown on first image bellow as excpected, everything is ok, but after a second click on any row, I get a mutation error (from redux-immutable-state-invariant). Aparently it is not related with the data iteself because I'm making a copy of it, with Object.assign.

First image, loads ok, first click ok:

Second image, second click error (any row or same row):

Code:

If I remove the use of redux-immutable-state-invariant (reduxImmutableStateInvariant on confiure store) it works, since it does not stop on this error of course.

Pasted below or gist: https://gist.github.com/edgarrc/a62bf952a49adb9c31a23cacad5a768b

` //////

. . import { routerReducer } from 'react-router-redux'; import { Reducers } from 'react-redux-grid'; . . const rootReducer = combineReducers({ . . ...Reducers, . . });

////////Configure store . . export function configureStore() { return createStore( rootReducer, composeWithDevTools( applyMiddleware( thunk, routerMiddleware(browserHistory), reduxImmutableStateInvariant() ) ) ) } . .

////////Component:

. . import { Grid, Actions } from 'react-redux-grid'; . .

class AssuntosTable extends React.Component {

constructor(props, context) {
    ..
    super(props, context);
    ..
}    
render() {

    console.log('data len ', this.props.data.length); //(it is > 100)

    const dataSource = () => {
        return new Promise((success) => {
            const gridResponse = {
                data: this.props.data, //working fine
                success: true
            };
            success(gridResponse);
        });
    }; 

    const simpleData = {
        columns: [
            {
                name: 'Descrição',
                width: '40%',
                dataIndex: 'mDescricao',
                className: 'additional-class',
                expandable: true
            },
            {
                name: 'Resumo',
                width: '60%',
                dataIndex: 'mResumo',
                className: 'additional-class',
                defaultSortDirection: 'descend'
            }
        ],
        dataSource: dataSource,
        showTreeRootNode: false,
        plugins: {
            COLUMN_MANAGER: {
                resizable: true,
                moveable: false,
                sortable: {
                    enabled: false,
                    method: 'local',
                    sortingSource: dataSource
                }
            }
        },
        stateKey: 'treeAssuntos',
        gridType: 'tree',
        events:{               
            HANDLE_ROW_CLICK: (row, reactEvent, id, browserEvent) => {
                console.log("Click!");
            }
        },
        store        };
    return (
        <Grid  {...simpleData} />
    );
}

}

export default AssuntosTable; `

Can you please help me? Thank you!

[bencripps]

See issue #189 for further context -- right now I don't think this is a use case we're going to support.

[edgarrc]

Thank you for your answer!

But I don't understand. The data is not being changed like he says on #189 (the component changes the store associated with the data).

On my case, the line:

data: this.props.data, //working fine

Is like:

var datS = Object.assign([], this.props.data); //This is what I have on parent

data: datS ,

There is nothing I can see that changes the data, the first click does nothing but print it's id on console and works fine, the second click though shows an error.

Not sure if there is a bug, just can't observe a mutation on the data that is used by the Grid.

I apreciate if you could please point me to the problem exactly so I can focus on it.