Why this code not excute like I want?

[zmm2tysu]

const GlobalStore = proxy({
 data: {
    obj1: {
      text: 'hello',
    },
  },
})

export default ()  => {
   //not work
   const state = useProxy(GlobalStore.data.obj1);
   //work
   const state = useProxy(GlobalStore.data).obj1;

   return (
      <div>
         <span>{state.text}<span>
         <button onClick={() => {
            //not work
            GlobalStore.data = {obj1: {text: 'world'}}
            //work
            GlobalStore.data.obj1 = {text: 'world'}
         }}>update</button>
      </div>
   )
}

the redux tools record globalStore is changed, but UI is not rerender.

Hi, I want to know why this dosent work when I click the update button.If there is some concept I have missed or mixed, pls let me know, thx very much!

[dai-shi]

const state = useProxy(GlobalStore.data.obj1);
// 👆 means like this 👇 
const foo = GlobalStore.data.obj1;
const state = useProxy(foo);

// When you do this:
GlobalStore.data = {obj1: {text: 'world'}}
// `foo` doesn't change

[zmm2tysu]

Thanks, I understantd that, but new confusion arises.

const state = useProxy(GlobalStore.data);

// this doesn't rerender either.
GlobalStore.data = {obj1: {text: 'world'}}
// this can work
GlobalStore.data.obj1 = {text: 'world'}

Or, did you mean which part wrapped by useProxy is always constant, and ressign it won't trigger rerendering UI. Am I understand it correctly？

[dai-shi]

Yes. You need to subscribe to GlobalState itself.

[zmm2tysu]

Got ya, that really helps me a lot!