Redux store updating but the component is not re-rendering

Question

I'm facing an issue, I have this component:

export const ContentModal = () => {

  ReactModal.setAppElement('#root');
  
  const activeVideo = useSelector(state => state.activeVideo);
  
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    console.log('Ha entrado en use effect')
    if (!activeVideo) return;
    setIsOpen(true);
  
  }, [activeVideo])
  

  const onCloseModal = () => {
    setIsOpen(false);
  }

  return (
    <ReactModal 
      isOpen={isOpen}
      shouldCloseOnOverlayClick={true}
      onRequestClose={onCloseModal}
      style={customStyles}
    >
      <h1>Hola</h1>

    </ReactModal>
  )
}

I basically get activeVideo from my redux state and, depending on that variable, I will show a modal or not.

My problem is that when I change activeVideo in my redux state this component won't re-render and I need it to re-render to show the modal popup (ReactModal)

I can see that the state is changing correctly in the redux tab:

Could anyone help me with this? Thank you in advance :)

Answer 1

Your selector is wrong. Should likely be

const activeVideo = useSelector(state => state.videos.activeVideo);