Destroys context

I’m using redux to connect child elements in my scene.

This one took a few hours to track down. I have a simple component connected to redux, like:

@connect(state => ({}))
class MyFriend extends Component {
  render() {
    return null;
  }
}

If I render it outside a <Canvas>, it works fine:

      <div>
        <MyFriend />
        <Canvas />
      </div>

However if I render it inside a Canvas:

      <div>
        <Canvas>
          <MyFriend />
        </Canvas>
      </div>

Then the app crashes:

Uncaught Invariant Violation: Could not find “store” in the context of “Connect(MyFriend)”

I suspect it’s related to the custom rendering here, but I’m still digging into it: https://github.com/drcmda/react-three-fiber/blob/master/src/canvas.js#L197-L204

[AndrewRayCode]

This didn’t work either:

Canvas.contextTypes = { store: PropTypes.object };
Canvas.childContextTypes = { store: PropTypes.object };

I’m not sure if this is related to the useEffect() call internally, or the .memo() of the Canvas component?

This works (I think), which should probably give me a clue as to what’s going on. It’s not ideal:

import { ReactReduxContext, Provider } from 'react-redux';

...

        <ReactReduxContext.Consumer>
          {({ store }) => (
            <Canvas>
              <Provider store={store}>
                 ...
              </Provider>
            </Canvas>
         )}
      </ReactReduxContext.Consumer>

[stephencorwin]

@JustFly1984 We rolled out a useContextBridge hook in the @react-three/drei package for official use within the react-three-fiber ecosystem.

function SceneWrapper() {
  // bridge any number of contexts
  const ContextBridge = useContextBridge(ThemeContext, GreetingContext)
  return (
    <Canvas>
      <ContextBridge>
        <Scene />
      </ContextBridge>
    </Canvas>
  )
}

function Scene() {
  // we can now consume a context within the Canvas
  const theme = React.useContext(ThemeContext)
  const greeting = React.useContext(GreetingContext)
  return (
    //...
  )
}

It’s been working out really well and the api is pretty friendly 😃