Store from Redux provider unavailable in connected react-pixi-fiber components about react-pixi-fiber HOT 8 CLOSED

@ygorlf see the simplest example I could come up with: https://codesandbox.io/s/react-pixi-fiber-with-redux-g4k7n

from react-pixi-fiber.

@nstolpe thanks for the report. If you are using [email protected] which is using the new Context API then this is a limitation of the new Context API itself. The context is not passed across different reconcilers because of context boundaries. See this comment for more info and workarounds.

from react-pixi-fiber.

Thanks for getting back to me so quickly @michalochman. I'll give some of the workarounds in the PR comment, shoulda looked at some closed issues for more info (I'll close this too).

from react-pixi-fiber.

@nstolpe these workarounds are functional, personally I use this one.

from react-pixi-fiber.

I was able to get back to this and solved the issue thanks to those links, using something like this:

const ScreenContext = createContext();

const TestContainer = props => {
    // react-pixi-fiber Container
    return (<Container name="TestContainer" position={props.testContainerPosition} />);
};

const mapStateToProps = (state, ownProps) => ({ ...state });

const ConnectedTestContainer = connect(mapStateToProps, null, null, { context: ScreenContext })(TestContainer);

const Screen = props => (
    <ReactReduxContext.Consumer>{({ store }) =>
        <Stage>
            <AppContext.Consumer>{app => (
                <Provider store={store} context={props.context}>{props.children}</Provider>
            )}</AppContext.Consumer>
        </Stage>
    }</ReactReduxContext.Consumer>
);

render(
    <Provider store={store}>
        <AppWrapper>
            <ScreenWrapper>
                <Screen context={ScreenContext}>
                    <TestContainer />
                </Screen>
            </ScreenWrapper>
            <ConnectedControls />
        </AppWrapper>
    </Provider>,
    appContainer
);

ConnectedControls are ReactDOM components that are connected to my Redux store, and
ScreenContext is used with the inner Redux provider and connected components to avoid the warning about the same context being used by multiple renderers. And all of my data from the provider inside render is available to the react-pixi-fiber components inside of Screen's stage/consumer/provider section.

Thanks again for the help.

from react-pixi-fiber.

Thanks for sharing that @nstolpe!

from react-pixi-fiber.

Hi guys, I'm struggling to integrate redux in my react-pixi-fiber demo, anyone have a demo of a simple integration that I can look? Thanks!
@michalochman @nstolpe

from react-pixi-fiber.

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:

• facebook/react#13336

Which seems to have been closed by this PR:

• facebook/react#13728

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

• facebook/react#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'.

Originally posted by @0xdevalias in pixijs/pixi-react#77 (comment)

from react-pixi-fiber.