kepler.gl: Kepler.gl doesn't work with Redux4 used in the wrapper application

Describe the bug Kepler.gl is not working when wrapper application uses react-redux6. To Reproduce I created a branch with a new example here

Expected behavior Kepler.gl should load correctly

Debug trace

Uncaught Error: Could not find "store" in either the context or props of "Connect(Container)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Container)".
    at invariant (browser.js:38)
    at new Connect (connect.js:132)
    at constructClassInstance (react-dom.development.js:12628)
    at updateClassComponent (react-dom.development.js:14480)
    at beginWork (react-dom.development.js:15335)
    at performUnitOfWork (react-dom.development.js:18150)
    at workLoop (react-dom.development.js:18190)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)

Additional context React 15

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 18 (3 by maintainers)

Most upvoted comments

Thanks for working on this @macrigiuseppe, I found this problem and downgraded react-redux to version 5.1.1, but unfortunately with this version it is not possible to use connected-react-router. So after upgrading back to react-redux 6.0.0, I’ve found this solution that also works for me:
      <ReactReduxContext.Consumer>
        {({ store }) => (
          <div className="App">
              <KeplerGl
                id="foo"
                mapboxApiAccessToken={MAPBOX_TOKEN}
                store={store}
              />
          </div>
        )}
      </ReactReduxContext.Consumer>

Have you tried react-redux 5.0.7, it works for me

macrigiuseppe on Feb 12, 2019

Thanks for working on this @macrigiuseppe, I found this problem and downgraded react-redux to version 5.1.1, but unfortunately with this version it is not possible to use connected-react-router. So after upgrading back to react-redux 6.0.0, I’ve found this solution that also works for me:

      <ReactReduxContext.Consumer>
        {({ store }) => (
          <div className="App">
              <KeplerGl
                id="foo"
                mapboxApiAccessToken={MAPBOX_TOKEN}
                store={store}
              />
          </div>
        )}
      </ReactReduxContext.Consumer>

carloscdias on Feb 11, 2019

I use this workaround:

    <Provider store={store}>
        <CustomContext.Provider value={store}>
            <App />
                <KeplerGl
                   id="foo"
                   store={store}
                   width={WIDTH}
                   mapboxApiAccessToken={MAPBOX_TOKEN}
                   height={HEIGHT} />
       </CustomContext.Provider>
 </Provider>

sushmitsarmah on Feb 8, 2019