score:2

Accepted answer

you just forgot most crucial part - every component that uses any observable value needs to be wrapped with observer decorator! like that:

const contactpopup = () => {
  const { appstore } = usestore();

  const handlecancel = () => {
    appstore.setcontactformopen(false);
    console.log('close contact from', appstore.contactformopen);
  };

  return (
    <modal
      title="contact us"
      visible={appstore.contactformopen}
      oncancel={handlecancel}
    >
      <h2>modal open</h2>
    </modal>
  );
};

// here i've added `observer` decorator/hoc
export default observer(contactpopup);

and you don't need useeffect or anything like that now.

codesandbox


Related Query

More Query from same tag