Integration of react babylonjs and redux

Hello everyone.
I am new to babylon community, and currently practicing with react and redux with babylonjs.
But i am facing some issues. I hope someone here can help me.
Basically whenever some changes in my state for example width of objects. Then only few objects are updates not all. I don’t how can i forcefully update all my objects.
I am using react-babylojs npm package as well, which i found on the documentation of babylon.
Please help me if someone know about this, any suggestion will help, since i am new and want to learn more and more.

Hi @A_K
there are known issues in maintaining the context when using redux. In short, you need to bridge it, see redux store context not being passed through babylon react components? · Issue #126 · brianzinn/react-babylonjs · GitHub

I ended up switching to zustand zustand - npm which removes the need to bridge and also gives you the ability to access or subscribe to the store outside of react which is very useful for Babylonjs.

It is however a new tech to learn, so bridging may be best for you

cc @brianzinn who has also plenty of Reacty tricks with Babylon :slight_smile:

If you didn’t say that some changes were going through then I would have thought it was what @Charge said. There is a storybook for the context bridging across renderers here:
react-babylonjs/contextBridge.stories.js at master · brianzinn/react-babylonjs (github.com)

Since some objects are not being updated then it seems more like a re-render issue not flowing the prop change back. Can you share how you are updating the width on the objects that aren’t updating?

Some props (such as constructor arguments) do not flow back through, such as “width” on <box width={state.width} />. In those cases, you need to force a dispose and create and that can be easily done with a key. ie:

<box key={`width:${mywidth}` width={state.width}}

If that’s not the case and there is something going on with redux. I have done listening in on Redux with custom middleware - you can see that here:
brianzinn/redux-wiretap: add/remove listeners to monitor redux actions (github.com)
It was written more for eavedropping on Redux and having event handlers in Babylon.js. Zustand is a great library if you are not too far along on Redux (redux + saga is a great combo for turn-based games/configurators).

Hello just checking in, was your question answered? @A_K