react-three-renderer
react-three-renderer copied to clipboard
firtoz
Passing React context to child components
I'm having some trouble with passing the context (for Redux's store) into a react-three-renderer component. I'm trying to use Redux's connect() on a component that returns an object3d, but it's giving me this error:
Uncaught (in promise) Error: Could not find "store" in either the context or props of "Connect([component] map)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect([component] map)". at invariant (http://localhost:8080/bundle.js:65251:15) at new Connect (http://localhost:8080/bundle.js:70594:58) at http://localhost:8080/bundle.js:98048:24
It looks like the context isn't being passed to the child component in this instance, but it works fine if the child is a <div> or any other HTML element.
Here's where I'm calling connect() map.js: https://github.com/kevinhikaruevans/uojs2/blob/get-map-data/src/client/components/map/index.js#L13
The parent container is in scene/index.js, which is in pages/game/index.js. The <Provider> before our router should be passing the context in here.
Is this a bug or am I overlooking something?
Thanks!
For reference, here's the original issue
Hi, I will take a look and add some tests for it later this week :)
On Mon, 9 Jan 2017, 22:19 Kevin Evans, [email protected] wrote:
I'm having some trouble with passing the context (for Redux's store) into a react-three-renderer component. I'm trying to use Redux's connect() on an object3d, but it's giving me this error:
Uncaught (in promise) Error: Could not find "store" in either the context or props of "Connect([component] map)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect([component] map)". at invariant (http://localhost:8080/bundle.js:65251:15) at new Connect (http://localhost:8080/bundle.js:70594:58) at http://localhost:8080/bundle.js:98048:24
It looks like the context isn't being passed to the child component in this instance, but it works fine if the child is a
or any other HTML element.Here's where I'm calling connect() map.js: https://github.com/kevinhikaruevans/uojs2/blob/get-map-data/src/client/components/map/index.js#L13
The parent container is in scene/index.js https://github.com/kevinhikaruevans/uojs2/blob/get-map-data/src/client/components/scene/index.js#L48, which is in pages/game/index.js https://github.com/kevinhikaruevans/uojs2/blob/get-map-data/src/client/pages/game/index.js#L17
Is this a bug or am I overlooking something?
Thanks!
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/toxicFork/react-three-renderer/issues/140, or mute the thread https://github.com/notifications/unsubscribe-auth/AA0iLRHHPc6y2wsAcTUjk1etlFjIfY8Nks5rQrJ6gaJpZM4LezEB .
I have success using it with Redux by passing store as a prop to the react-three-renderer components all the way down the chain. Is that not working for you @kevinhikaruevans? Admittedly the context passing would be nice, but passing it as a prop seems to work.
I was having weird issues passing the entire store as a prop. I couldn't figure it out, so I ended up passing the 3 variables I needed from the store as props. It's not a big deal for me, but it would definitely be nice to have context passing. 😄
So far my test was passing context that was created already within R3R. However I think there may be some issues while passing it through some boundaries. Therefore I will classify it as a bug. I'm also thinking of workarounds, and yes one of them is to pass it as a prop :)
I experienced problems with context as well. They don't make it down the React3 component. It was also not possible to set context within a R3R component and pass it down. For me it seems using context within R3R is broken somehow :(
Alright I will find a work around for this, hopefully it won't require too much magic!
Unfortunately, context is a little bit of dark magic in itself.
I'll write my notes in this issue.
For now, passing context within components that are all within R3R should work (e.g. a scene component context passing to object3d component context)... Passing it through the main React3 component may not (since it's essentially using a different renderer whose internals are different).
If "all contained" context doesn't work, please write any examples you find here and I'll add them to my tests.
On Wed, 25 Jan 2017 at 20:05 coldi [email protected] wrote:
I experienced problems with context as well. They don't make it down the React3 component. It was also not possible to set context within a R3R component and pass it down. For me it seems using context within R3R is broken somehow :(
— You are receiving this because you commented.
Reply to this email directly, view it on GitHub https://github.com/toxicFork/react-three-renderer/issues/140#issuecomment-275217943, or mute the thread https://github.com/notifications/unsubscribe-auth/AA0iLQJ5B9egJ9vuIYSBSXI913aOePE4ks5rV6scgaJpZM4LezEB .
Hi @kenta88 unfortunately I had no opportunities to continue work in my spare time lately, I had attempted to recreate r3r on top of react fiber which will help solve the context problem but unfortunately because of my chaotic schedule I cannot provide an ETA on when that may be released.
Of course @toxicFork. Let me know if can I provide some help to rebuild the library. I'll be very happy to help.
Just wanted to mention that I worked around this issue in a non-standard way. I "cheated" and added a "store" getter-property to the React.Component.prototype object, which returns the global store object.
It's not a very "clean" approach, but consider it okay in my case since I only need it as a temporary patch. (since I expect this won't still persist to the fiber version when completed)
