Pass store to Grid

[kombucha-java]

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?

[hcsgzh]

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: 'hgardnero6@ed.gov',
              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: 'hgardneross6@ed.gov',
                      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: 'hgardneross6@ed.gov',
                      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: 'hgoss6@eds.gov',
                              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: 'hgoss6@ed.gov',
                              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: 'hgossjdjdjdj6@ed.gov',
                                      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: 'hehehe@ed.gov',
              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: 'hehehe@ed.gov',
                      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!

[victorvess]

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

[e-neko]

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.