Store not getting passed down to connected cellrendererframework

Question

I'm using the following components: react v.16.5 react-redux v.6.0 ag-grid v.18.1

I'm using cellRendererFramework to display a custom component in one cell of ag-grid. However as soon as i make this custom component a connected component,

Error:

Could not find "store" in the context of "Connect(TestComponent)". Either wrap the root component in a , or pass a custom React context provider to and the corresponding React context consumer to Connect(TestComponent) in connect options.

the colDef in the ag-grid is as follows:

{
  field: "TestField",
  headerName: "Test Field",
  rowGroup: false,
  cellRendererFramework: TestComponent
}


// TestComponent.js
import React, {Component} from 'react';
import {connect} from 'react-redux';

class TestComponent extends Component {

  render() {
    return(<div>Hello</div>);
  }    
}

export default connect()(TestComponent);

I've created the store and defined the provider at the Index.js level. Is it that cellrendererFrameworks cannot be connected?

I came across this issue in another stack overflow post but there they'd said this issue has been resolved in react vers. 13?
https://github.com/ag-grid/ag-grid-react/issues/88

Please note this is not for writing a testcase- i need the TestComponent to actually be connected.

Please could someone help with this as it seems a pretty fundamental bug that nested components are getting blocked from being connected.

Answer 1

From the docs and lilbumbleber's response:

With React 16 Portals were introduced and these are the preferred way to create React components dynamically. If you wish to try use this feature you'll need to enable it as follows:

// Grid Definition
<AgGridReact
    reactNext={true}
    ...other bindings

If you use connect to use Redux, or if you're using a Higher Order Component to wrap the React component at all, you'll also need to ensure the grid can get access to the newly created component. To do this you need to ensure forwardRef is set:

export default connect(
    (state) => {
        return {
            currencySymbol: state.currencySymbol,
            exchangeRate: state.exchangeRate
        }
    },
    null,
    null,
    { forwardRef: true } // must be supplied for react/redux when using GridOptions.reactNext
)(PriceRenderer);

So, you could try adding those two:

1. Add reactNext={true} to <AgGridReact/> component
2. Change connect()(TestComponent); to connect(null, null, null, { forwardRef: true })(TestComponent);

Edit: This bug was fixed in version 20.x