# Integration of react babylonjs and redux

**URL:** <https://forum.babylonjs.com/t/integration-of-react-babylonjs-and-redux/30582>\
**Category:** Questions\
**Tags:** react\
**Created:** [May 21, 2022, 3:28am UTC](https://forum.babylonjs.com/t/integration-of-react-babylonjs-and-redux/30582 "2022-05-21T03:28:58Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![A\_K](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/a_k/32/24547_2.png) [@A\_K](https://forum.babylonjs.com/u/A_K)\
**Post date:** [May 21, 2022, 3:28am UTC](https://forum.babylonjs.com/t/integration-of-react-babylonjs-and-redux/30582/1 "2022-05-21T03:28:58Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Charge](https://avatars.discourse-cdn.com/v4/letter/c/f475e1/32.png) [@Charge](https://forum.babylonjs.com/u/Charge)\
**Post date:** [May 21, 2022, 7:41am UTC](https://forum.babylonjs.com/t/integration-of-react-babylonjs-and-redux/30582/2 "2022-05-21T07:41:59Z")

</div>

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](https://github.com/brianzinn/react-babylonjs/issues/126)

I ended up switching to zustand [zustand - npm](https://www.npmjs.com/package/zustand) 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

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [May 23, 2022, 2:18pm UTC](https://forum.babylonjs.com/t/integration-of-react-babylonjs-and-redux/30582/3 "2022-05-23T14:18:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![brianzinn](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/brianzinn/32/28013_2.png) [@brianzinn](https://forum.babylonjs.com/u/brianzinn)\
**Post date:** [May 23, 2022, 2:52pm UTC](https://forum.babylonjs.com/t/integration-of-react-babylonjs-and-redux/30582/4 "2022-05-23T14:52:15Z")

</div>

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)](https://github.com/brianzinn/react-babylonjs/blob/master/packages/storybook/stories/babylonjs/Basic/contextBridge.stories.js)

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:

```nohighlight
<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)](https://github.com/brianzinn/redux-wiretap)  
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).

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [June 22, 2022, 12:21pm UTC](https://forum.babylonjs.com/t/integration-of-react-babylonjs-and-redux/30582/5 "2022-06-22T12:21:41Z")

</div>

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