Dispatching an redux action in <Canvas /> with next.js

[jacky0707]

Hello guys, here's my code.

I have a redux state: dialogIsOpen: Boolean and a redux action: openDialog

Let me separate my issue to three process:

1. On the left I take line 57 away first, and pass dialogIsOpen to <SingleStore>, and it's able to access and console.log out redux state.

2. I add line 57 back and save the file, thanks for the hot-reload, I can call openDialog right away by clicking the cube, and the dialog did show up successfully.

3. The problem I'm facing now, if I refresh the page after both above step finished, I'll see this issue:

I've reference to this #719 and know there might be some problem between react and <Canvas>, but from my first and second step, maybe it didn't really lost the context in my case.

Any advise or comment will be appreciate.

[drcmda]

looks like youre giving the physics hook non serializable data. if position would be a vector3 for instance and so on. the data is being shipped to a worker.

[jacky0707]

Thank you very much for the hint! I thought the error is related to Redux.

looks like youre giving the physics hook non serializable data.
=> Yes I was trying to add a feature that once <SingleStore>(implement by useBox() from "@react-three/cannon") is clicked, the state of dialogIsOpen in redux will change, so I passopenDialog, which is a function, to <SingleStore> to let it do the dispatch the action when it was clicked.

dialogIsOpen state and openDialog will be also used outside <Canvas>

If I'm not able to do such thing in <Physics /> can I ask for any advise from you?

[drcmda]

i think you are spreading the dialogIsOpen and wall into useBox, that's probably all it is. of course you can react to redux state changes inside the component, but you're putting data into the physics hook that has no purpose there and it will be serialised by the browser and transferred to the worker. since it cant serialise a function it must crash.

[jacky0707]

OMG your so right! This is my first time trying three, use-cannon and so on. I just copy the demo on the internet and didn't notice I've pass ...props into useBox(), I'm just so careless my bad.
Thank you @drcmda you really save my day.