Incompatibility with Redux

[lorenzocadamuro]

I added Redux in my app but it doesn't seem to work; if I try to retrieve data from store in a children of I receive this error:

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

[inlet]

Can you create a codesandbox/codepen example of this? Which version of React do you use?

[lorenzocadamuro]

I'm using Gatsby with React 16.6.3.

Here the codesandbox https://codesandbox.io/s/jn8y0zmj23 but there's a strange error of cross-origin – anyway, the code should generate the error I was talking about.

At the moment the workaround that I found is to put the Provider of Redux as Child of Stage, in this way:

...

<Stage {...props}>
  <Provider store={store}>
    <Section />
  </Provider>
</Stage>

...

[lostfictions]

Hey, I'm hitting something like this as well, I think. I'm not using Redux, but I bet my case is the same -- and I bet #55 is the same too. Context just doesn't seem to pass through <Stage>, unless you use the workaround @lorenzocadamuro describes.

If I comment out <Stage> like this:

My components down the tree immediately start receiving context from the <Provider>.

[inlet]

It seems that the Context is not passed through the reconciler indeed. I guess it has something to do with the getRootHostContext and getChildHostContext in the hostconfig.

Will look into this next week, hopefully I can manage it to work. :)

If someone has pointers where to look, please let me know! Thanks

[bichotll]

Hi there! Just for the record. It happened the same to me. Same scenario than @lostfictions

[inlet]

I know, this one has high priority

I won’t have time to fix this issue within the next 2 weeks, but please feel free to create a PR with the implementation.

Thanks!

[bichotll]

After looking at the hostconfig and playing with it, I think that may actually be related to the Stage component and the render method. I'm gonna take a look at that now..and see if any luck.

getRootHostContext and getChildHostContext seem to be just confusing by the name given. It does not seem to have anything to do with the actual context. See https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMHostConfig.js#L113

@inlet correct me if I'm wrong.

In any case. Due react-reconcilier is not documented and it's though to go through, I decided to attach some useful links related to it: https://www.npmjs.com/package/react-reconciler https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMHostConfig.js https://blog.atulr.com/react-custom-renderer-1/ https://blog.atulr.com/react-custom-renderer-2/ https://blog.atulr.com/react-custom-renderer-3/

[inlet]

The react-reconciler package is considered experimental and the API changes now and then. This lib is using the new Context API and it uses context boundaries, which seems to block contexts from outside the reconciler.

I have an hour to see if I can come up with a solution.

[bichotll]

We may want to open an issue in the React repo in this case?

[inlet]

Contexts are not passed through the reconcilers with the new Context API. Create a wrapper component that consumes the context and provides it again in the new reconciler context:

https://codesandbox.io/s/volq0qj7

This solution is also pointed out here: https://github.com/michalochman/react-pixi-fiber/issues/93.

I'll close this issue now as it is not related to this lib but to React Context API.

[besserwisser]

Contexts are not passed through the reconcilers with the new Context API. Create a wrapper component that consumes the context and provides it again in the new reconciler context:

https://codesandbox.io/s/volq0qj7

This solution is also pointed out here: michalochman/react-pixi-fiber#93.

I'll close this issue now as it is not related to this lib but to React Context API.

This might be a stupid question, but how do I pass multiple Contexts with the bridge?

[kennycrosby]

Any update on this? Running into this issue with React Context api.

[0xdevalias]

This solution is also pointed out here: michalochman/react-pixi-fiber#93.

I'll close this issue now as it is not related to this lib but to React Context API.

In case anyone else stumbles here from Google/etc, react-pixi-fibre now lists this in it's 'caveats' section of the README:

• https://github.com/michalochman/react-pixi-fiber#react-context-api-limitations

This links to the following React issue:

• https://github.com/facebook/react/issues/13336

Which seems to have been closed by this PR:

• https://github.com/facebook/react/pull/13728

Which seems to have been included in the React 16.6.0 changelog in this PR:

• https://github.com/facebook/react/pull/13927

---

I haven't looked any deeper into things that that yet, but at least in theory, I would expect that the React side of this bug/issue/weirdness should be fixed now. So it may 'just work'.

[Jayatubi]

This issue still exist on:

"@pixi/react": "^7.1.1", "pixi.js": "^7.3.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-redux": "^8.1.3",

Any updates or walkaround?

[lucasmaffazioli]

@Jayatubi I fixed my issue having the provider inside the PixiStage, and I access the store inside PixiMainScreen:

    <PixiStage>
      <Provider store={store}>
        <PixiMainScreen></PixiMainScreen>
      </Provider>
    </PixiStage>

[Jayatubi]

@Jayatubi I fixed my issue having the provider inside the PixiStage, and I access the store inside PixiMainScreen:

    <PixiStage>
      <Provider store={store}>
        <PixiMainScreen></PixiMainScreen>
      </Provider>
    </PixiStage>

Thanks for the solution it works.

BTW I just found a doc mentioned another solution and it works too: https://pixijs.io/pixi-react/context-bridge/