React コンポーネント間でシリアル化可能なデータを共有する方法を示したいと考えています。 NextJS のクライアント コンポーネント。

無関係なコンポーネントがいくつかあります:

初期状態を含むオブジェクトを作成しましょう

export const state: { count: number } = { count: 0 };

データを Map または WeakMap に保存できます。状態はそれにアクセスするためのキーになります。また、subscribers 配列も必要になります。

const stateMap = new WeakMap

次に、データ変更をサブスクライブするためのフックを作成しましょう。

export function useCommonState(stateObj: T) {
  // more efficient than `useEffect` since we don't have any deps
  React.useInsertionEffect(() => {
    const cb = () => {
      const val = stateMap.get(stateObj);
      _setState(val!);
    };
    // subscribe to events
    subscribers.push(cb);

    return () => {
      subscribers.slice(subscribers.indexOf(cb), 1);
    };
  }, []);
}

次に、状態の取得と設定に関連するロジックを追加しましょう

  // all instances of hook will point to same object reference
  const [state, _setState] = React.useState(() => {
    const val = stateMap.get(stateObj) as T;
    if (!val) {
      stateMap.set(stateObj, stateObj)
      return stateObj
    }
    return val
  });

  const setState = React.useCallback((newVal: object) => {
    // update value
    stateMap.set(stateObj, newVal);
    // notify all other hook instances
    subscribers.forEach((sub) => sub());
  }, []);

  return { state, setState };

さらに、
のような 3 つのコンポーネントで使用できるようになりました

import { state as myState } from './state';
//...

const { state, setState } = useCommonState(myState);

 setState({ count: state.count   1 })}
  className="p-2 border"
>
   

// ...
Component A
Count: {state.count}

ここで仕組みを確認できます https://stackblitz.com/~/github.com/asmyshlyaev177/react-common-state-example
またはここ https://codesandbox.io/p/github/asmyshlyaev177/react-common-state-example/main
または、github https://github.com/asmyshlyaev177/react-common-state-example

この原則に基づいた NextJS のライブラリをチェックしてください https://github.com/asmyshlyaev177/state-in-url

読み取り用に送信します。