How to make inter-store dependencies reactive?

[dominictobias-bullish]

Hi,

How can you read data from one store, and retain reactivity? By default it doesn't work:

Screen.Recording.2025-02-19.at.3.36.51.PM.mov

https://codesandbox.io/p/sandbox/hh7dxl?file=%2Fsrc%2FApp.tsx%3A3%2C34

import "./styles.css";

import { create } from "zustand";
import { useState } from "react";

interface StoreA {
  count: number;
  incrementCount: () => void;
}

const useStoreA = create<StoreA>((set) => ({
  count: 0,
  incrementCount: () => set((s) => ({ count: s.count + 1 })),
}));

interface StoreB {
  getCount: () => number;
}

const useStoreB = create<StoreB>((set) => ({
  getCount: () => {
    return useStoreA.getState().count;
  },
}));

export default function App() {
  const count = useStoreB((state) => state.getCount());
  const incrementCount = useStoreA((state) => state.incrementCount);
  const [, setForceRender] = useState(0);

  return (
    <div className="App">
      <p>count: {count}</p>
      <button onClick={() => incrementCount()}>Increment count</button>
      <button onClick={() => setForceRender((n) => n + 1)}>
        Force re-render (to see actual state change)
      </button>
    </div>
  );
}