Comments (8)
@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:This links to the following React issue:
Which seems to have been closed by this PR:
Which seems to have been included in the React
16.6.0
changelog in this PR:
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.
Related Issues (20)
- Performance comparison with react-pixi? HOT 1
- TypeError: Cannot read properties of null (reading 'stencil') at ContextSystem.push../node_modules/@pixi/core/dist/esm/core.js.ContextSystem.validateContext (core.js:5206) HOT 4
- NPM installation of library react-pixi-fiber@[email protected] throws error HOT 4
- 1.0.0-beta.13 missing index.es.js HOT 12
- Error: Vite(esbuild) unable to find matching export in PIXI.js HOT 14
- Attempting to compile an app with PixiJS 5.3.11 or 6.2.2 and the latest beta 15 result in an error. HOT 1
- Is this project dead? HOT 2
- Webpack complains about missing exports in pixi.js HOT 3
- Could not resolve dependency: peer react@"^17.0.2" from [email protected] HOT 3
- Stage is not compatible with the React's StrictMode HOT 5
- Pointer Events don't fire at all HOT 2
- Upgrade reconciler
- Text components style property is not correctly typed HOT 2
- Issue on running demo HOT 1
- rightupoutside event may not be supported? HOT 2
- Can't use with new versions of PixiJS HOT 6
- export 'extras' (imported as 'PIXI') was not found in 'pixi.js' HOT 3
- Explicit "createStageClass" usage causes crash HOT 1
- Breaking changes in React experimental branch
- TypeError dispatcher.useSyncExternalStore is not a function HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-pixi-fiber.