यह दिखाना चाहते हैं कि आप रिएक्ट घटकों के बीच किसी भी क्रमबद्ध डेटा को कैसे साझा कर सकते हैं, उदाहरण के लिए। नेक्स्टजेएस में क्लाइंट घटक।

हमारे पास कुछ असंबंधित घटक हैं:

आइए एक ऑब्जेक्ट बनाएं जिसमें प्रारंभिक स्थिति होगी

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

हम डेटा को मानचित्र या वीकमैप में संग्रहीत कर सकते हैं, राज्य उस तक पहुंचने की कुंजी होगी। साथ ही, सब्सक्राइबर्स ऐरे की भी आवश्यकता होगी।

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
या जीथब में https://github.com/asmyshlyaev177/react-common-state-example

इस सिद्धांत के आधार पर NextJS के लिए मेरी लाइब्रेरी देखें https://github.com/asmyshlyaev177/state-in-url

पढ़ने के लिए टीएनएक्स।