react-redux-grid
react-redux-grid copied to clipboard
bencripps
Pass store to Grid
Could you please explain how to pass store to Grid? If i try to not define prop 'store' i get the error -
Uncaught TypeError: Cannot read property 'dispatch' of undefined at Grid.setColumns (app.js:180670) at Grid.componentWillMount (app.js:180392) at callComponentWillMount (app.js:170651) at mountClassInstance (app.js:170744) at updateClassComponent (app.js:172444) at beginWork (app.js:173298) at performUnitOfWork (app.js:176113) at workLoop (app.js:176153) at renderRoot (app.js:176239) at performWorkOnRoot (app.js:177128)
The reason is this.context.store is undefined. If i try to define Grid prop 'store' manually the error is -
Uncaught Error: Passing redux store in props has been removed and does not do anything. To use a custom Redux store for specific components, create a custom React context with React.createContext(), and pass the context object to React-Redux's Provider and specific components like: <Provider context={MyContext}><ConnectedComponent context={MyContext} /></Provider>. You may also pass a {context : MyContext} option to connect
I tried to create custom context and pass it to redux's Provider and down to the Grid, but the result was the same - this.context.store was undefined. What am I doing wrong?
I have the same issue.
import React, { Component, PropTypes } from 'react';
import './App.css';
import { Provider } from 'react-redux';
import { Grid } from 'react-redux-grid';
import {store} from './store';
const treeData = {
root: {
id: -1,
'Name': 'Root',
children: [
{
id: 1,
parentId: -1,
Name: 'Category 1',
GUID: '8f7152dc-fed7-4a65-afcf-527fceb99865',
Email: '[email protected]',
Gender: 'Male',
Address: '605 Manley Park',
'Phone Number': '31-(678)495-4134',
children: [
{
id: 11,
parentId: 1,
Name: 'Category 11',
GUID: '8f7152dc-fed7-4a65-afcf-527fceb991865',
Email: '[email protected]',
Gender: 'Male',
Address: '12 Manley Park',
'Phone Number': '31-(678)495-4134',
},
{
id: 12,
parentId: 1,
Name: 'Category 12',
GUID: '8f7152dc-fed7-4acf-527fceb991865',
Email: '[email protected]',
Gender: 'Male',
Address: '12 Manley Park',
'Phone Number': '31-(678)495-4134',
children: [
{
id: 121,
parentId: 12,
Name: 'Category 121',
GUID: '8f7q2dc-fedsss7-4acf-527fceb991865',
Email: '[email protected]',
Gender: 'Male',
Address: '21 fake Park',
'Phone Number': '31-(678)495-4134',
},
{
id: 122,
parentId: 12,
Name: 'Category 122',
GUID: '8f7q2dc-fed7-4acf-527fceb991865',
Email: '[email protected]',
Gender: 'Male',
Address: '21 fake Park',
'Phone Number': '31-(678)495-4134',
children: [
{
id: 1221,
parentId: 122,
Name: 'Category 1211',
GUID: '8f7q2dc-facf-527fceb991865',
Email: '[email protected]',
Gender: 'Male',
Address: '21 fdjdjake Park',
'Phone Number': '31-(678)495-4134'
}
]
}
]
}
]
},
{
id: 2,
parentId: -1,
Name: 'Category 2',
GUID: '8f7q2dc-facf-527fcebdk=-jdjd991865',
Email: '[email protected]',
Gender: 'Male',
Address: '212 Park',
'Phone Number': '31-(678)495-4134',
children: [
{
id: 21,
parentId: 2,
Name: 'Category 21',
GUID: '8f7q2dc-facf-527fcsw-jdjd991865',
Email: '[email protected]',
Gender: 'Male',
Address: '21112 Park',
'Phone Number': '31-(678)495-4134',
leaf: false
}
]
}
]
}
};
const plugins = {
COLUMN_MANAGER: {
resizable: true,
moveable: true,
sortable: {
enabled: true,
method: "local",
sortingSource: null
}
}
};
const events = {
HANDLE_CELL_CLICK: (cell, reactEvent, id, browserEvent) => {
console.log('On Cell Click Event');
}
};
const columns = [
{
name: 'Name',
width: '30%',
className: 'additional-class',
dataIndex: 'Name',
sortable: false,
expandable: true
},
{
name: 'Phone Number',
dataIndex: 'Phone Number',
sortable: false,
className: 'additional-class'
},
{
name: 'Email',
dataIndex: 'Email',
sortable: false,
className: 'additional-class',
defaultSortDirection: 'descend'
},
{
name: 'Address',
dataIndex: 'Address',
sortable: false,
className: 'additional-class'
}
];`
` const gridConfig = {
showTreeRootNode: false,
dataSource: null,
data: treeData,
gridType: 'tree',
dragAndDrop: true,
columns: columns,
events: events,
plugins: plugins,
stateKey: 'oneAndOnlyTree',
store
};
class App extends Component {
render() {
return (
<Provider store={ store }>
<Grid { ...gridConfig } />
</Provider>
);
}
}
export default App;
I guess the problem is that the way to get context.store.
getStore = () => this.context.store || this.props.store
"dependencies": { "react": "^16.8.1", "react-dom": "^16.8.1", "react-redux": "^6.0.0", "react-redux-grid": "^5.5.2", "react-scripts": "2.1.5", "redux": "^4.0.1", "redux-thunk": "^2.3.0" },
I installed 5.5.2 as same as the demo used.
Can someone give me a hand?
Thanks!
I was able to get things working by rolling back to react-redux 5.x and setting store explicitly in the props, so seems like a compatibility issue.
I don't actually use Redux for most of my app, so it was not a big deal to roll back to 5.x in my case
Definitely a compatibility issue, solved by the following:
import { ReactReduxContext } from 'react-redux';
import {Grid} from 'react-redux-grid';
class App extends React.Component {
static contextType = ReactReduxContext;
....
render (){
return (
<div className="App">
<Grid {...this.gridData} store={this.context.store}/>
</div>
);
}
}
You can access the context this way from any component inside redux's Provider anywhere in the hierarchy. I should probably submit a pull request with doing that directly inside the grid.
