관련되지 않은 React 구성 요소 간의 상태 공유

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

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

초기 상태를 담을 객체를 만들어 보겠습니다

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

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

const stateMap = new WeakMap<object, object>();
const subscribers: (() => void)[] = [];

이제 데이터 변경 사항을 구독하는 후크를 작성해 보겠습니다.

export function useCommonState<T extends object>(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<typeof stateObj>(() => {
    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);

<button
  onClick={() => setState({ count: state.count + 1 })}
  className="p-2 border"
>
  +
</button>
// ...
Component A<div>Count: {state.count}</div>

여기에서 어떻게 작동하는지 확인할 수 있습니다 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.

위 내용은 관련되지 않은 React 구성 요소 간의 상태 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!