React 구성요소 간에 직렬화 가능한 데이터를 공유하는 방법을 보여주고 싶습니다. NextJS의 클라이언트 구성 요소.

관련되지 않은 구성요소가 거의 없습니다.

초기 상태를 포함할 객체를 만들어 보겠습니다.

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

Map이나 WeakMap에 데이터를 저장할 수 있으며 상태는 데이터에 액세스하는 데 중요한 역할을 합니다. 또한 가입자 배열이 필요합니다.

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

읽기용 Tnx입니다.