What's the best way to subscribe to the root store?

[looeee]

Following @drcmda's suggestion here I can get access to the root store inside a component:

import {  useThree, _roots } from '@react-three/fiber';

const Camera = () => {
     const gl = useThree(state => state.gl);
     const store = _roots.get(gl.domElement).store;
     
     ....
}

Note that I'm doing this in a normal component inside the canvas so maybe there's a simpler way of accessing it, but in any case, this works.

Next, I want to subscribe to size for manually handling resizing (I'm using the new camera.manual prop)

<Canvas camera={{ manual: true }} >

Over in the camera component I now do this:

	useEffect(() => {
		const store = _roots.get(gl.domElement).store;
		
		const unsub = store.subscribe(
			({ size }) => {
				console.log('state: ', size);
                // handle resizing here
			},
			({ size }) => ({ size }),
			shallow
		);
		return () => unsub();
	}, []);

Resizing the canvas causes this to fire and the size is logged to the console, so great!
However, because of the recent changes to Zustand it also logs this deprecation warning:

react_devtools_backend.js:2540 [DEPRECATED] Please use `subscribeWithSelector` middleware 
    at Camera (http://localhost:4200/main.js:205:61)
    at Suspense
    at ErrorBoundary (http://localhost:4200/vendor.js:23636:5)
    at Provider (http://localhost:4200/vendor.js:23429:3)

Is there any plan to add the subscribeWithSelector middleware? Or if not, is there some other way I can avoid this warning? Wrap the store in another Zustand store that does use the middleware, perhaps?

[drcmda]

you can get the root store via useStore

const store = useStore()

daishi removed the selector, you can quickly avoid that warning by just checking old against new

let oldSize = store.getState().size
store.subscribe(() => {
  const { size } = store.getState()
  if (size !== oldSize) {
    ...
    oldSize = size
  }
})

though again i would love to fix the root issue for you. as it stands r3f calls gl.setSize. it seems to me like your solution works, but at best doubles the work and at worst is a race condition.

i could define "manual" as literally do nothing at all, no resize.

this is the current subscribe that handles resize:

  // Resize camera and renderer on changes to size and pixelratio
  let oldSize = state.size
  let oldDpr = state.viewport.dpr
  rootState.subscribe(() => {
    const { camera, size, viewport, internal } = rootState.getState()
    if (size !== oldSize || viewport.dpr !== oldDpr) {
      // https://github.com/pmndrs/react-three-fiber/issues/92
      // Do not mess with the camera if it belongs to the user
      if (!camera.manual && !(internal.lastProps.camera instanceof THREE.Camera)) {
        if (isOrthographicCamera(camera)) {
          camera.left = size.width / -2
          camera.right = size.width / 2
          camera.top = size.height / 2
          camera.bottom = size.height / -2
        } else {
          camera.aspect = size.width / size.height
        }
        camera.updateProjectionMatrix()
        // https://github.com/pmndrs/react-three-fiber/issues/178
        // Update matrix world since the renderer is a frame late
        camera.updateMatrixWorld()
      }
      // Update renderer
      gl.setPixelRatio(viewport.dpr)
      gl.setSize(size.width, size.height)

      oldSize = size
      oldDpr = viewport.dpr
    }
  })

so how about

  rootState.subscribe(() => {
    const { camera, size, viewport, internal } = rootState.getState()
    if (size !== oldSize || viewport.dpr !== oldDpr) {
      if (!camera.manual && !(internal.lastProps.camera instanceof THREE.Camera)) {
        ...
        // Set renderer size
        gl.setSize(size.width, size.height)
      }

      // Update renderer
      gl.setPixelRatio(viewport.dpr)

if you set the default cam to manual you'd be responsible for sizing the renderer. would this work for you?

[looeee]

daishi removed the selector, you can quickly avoid that warning by just checking old against new

let oldSize = store.getState().size
store.subscribe(() => {
  const { size } = store.getState()
  if (size !== oldSize) {
    ...
    oldSize = size
  }
})

Aha, that's why you're doing it that way. OK great, thank you.

though again i would love to fix the root issue for you. as it stands r3f calls gl.setSize

Well in my case I still have to handle camera resizing manually - I think I mentioned to you before that it's a hybrid ortho/perspective cam so I need to calculate the projection matrix manually. The issue with viewport I mentioned in #1892 is separate as I want to shrink down the scene smoothly when opening the side menu. Hopefully, I can solve both issues in the same way.

if you set the default cam to manual you'd be responsible for sizing the renderer. would this work for you?

I think there should be two settings:

1. R3F handles all resizing (the current behavior with camera.manual = false). This will be fine for 99% of scenes.
2. R3F doesn't do any sizing at all, for camera/renderer/canvas/dpr etc. - it's all handled by the user

I don't think it really makes sense to have somewhere in between where the camera doesn't get resized but the canvas does.

If you choose 2. then size and viewport can just report all zeros, R3F probably shouldn't track them at all (although maybe it would still need to for the raycaster? 🤔 ).