React: नेस्टेड संदर्भों को कैसे हल करेंगे?

आने वाले हुक एपीआई संदर्भों का उपभोग करने का एक अलग तरीका प्रदान करते हैं।

https://reactjs.org/docs/hooks-reference.html#usecontext

धन्यवाद। लेकिन प्रदाता के बारे में क्या?

मुझमें इमानदारी रहेगी। यदि आप इस तरह के कार्यान्वयन का सामना कर रहे हैं, तो आपका आर्किटेक्चर डिज़ाइन खराब लगता है और संभवतः आपको रिएक्ट संदर्भ का उपयोग नहीं करना चाहिए।

नहींं, मैं एक नया स्टोर कंटेनर डिजाइन कर रहा हूं। इसे प्रतिक्रिया में संदर्भ के साथ काम करने की आवश्यकता है।
https://github.com/rabbitooops/rako

प्रदाताओं / उपभोक्ताओं की गहरी 5 परतों के साथ उस लाइब्रेरी का क्या करना है?

क्योंकि यह Redux जैसे एकल स्टोर समाधान के बजाय प्रतिक्रिया करने के लिए कई दुकानों को इंजेक्ट करने का समर्थन करता है।

उस स्थिति में, संदर्भ हैंडलिंग अब लाइब्रेरी के उपयोगकर्ताओं पर है, और लाइब्रेरी पर कम है। वे सुविधाओं का उपयोग कैसे करते हैं, यह उनके ऊपर है, और यदि वे सभी प्रदाताओं को एक स्थान पर चाहते हैं (जो कई स्टोरों के उद्देश्य को हराते हैं), तो यह उनकी पसंद है। आदर्श रूप से आवेदन में अलग-अलग विभाजन पर एक एकाधिक स्टोर समाधान लागू किया जाएगा, इसलिए इस तरह के नेस्टेड संदर्भ बहुत अधिक दुर्लभ हैं।

मेरा 2 सेंट कम से कम।

तो संदर्भ एपीआई केवल स्टोर जैसे रेडक्स के लिए अनुकूल है।

हर्गिज नहीं। लेकिन अधिक यथार्थवादी उदाहरण के बिना अपनी समस्या पर चर्चा करना भी कठिन है। कृपया एक बनाएं?

कल्पना कीजिए कि तीन स्टोर थीम, उपयोगकर्ता और काउंटर हैं।

function theme(getState) {
  return {
    color: 'white',
    setColor(color) {
      this.setState({color})
    }
  }
}

function user(getState) {
  return {
    name: '',
    setName(name) {
      this.setState({name})
    }
  }
}

function counter(getState) {
  return {
    value: 0,
    increment() {
      const {value} = getState()
      this.setState({value: value + 1})
    }
  }
}

const [themeStore, userStore, counterStore] = createStores(theme, user, counter)
const [themeContext, userContext, counterContext] = createContexts(themeStore, userStore, counterStore)


class App extends React.Component {
  render() {
    return (
      <themeContext.StoreProvider>
        <userContext.StoreProvider>
          <counterContext.StoreProvider>

            <Child />

          </counterContext.StoreProvider>
        </userContext.StoreProvider>
      </themeContext.StoreProvider>
    )
  }
}

class Child extends React.Component {
  static contextType = [themeContext, userContext]
  render() {
    const [theme, user] = this.context

    /* ... */
  }
}

आपका आदर्श वाक्यविन्यास क्या होगा?

संदर्भ का उपयोग करें। लेखन, बिना घोंसले के शिकार कई संदर्भों का समर्थन करें।

नेस्टिंग के बिना कई संदर्भों का उपभोग करना पहले से ही समर्थित है। (हुक के साथ।)

Context.write में इसके लिए एक RFC खुला है। हमें नहीं पता कि यह मिलेगा क्योंकि यह कुछ बहुत ही जटिल प्रश्न उठाता है। लेकिन जब आरएफसी खुला है तो मुझे यकीन नहीं है कि इस मुद्दे में क्या कार्रवाई होगी। क्या आपके पास आरएफसी प्रेरणा में पहले से ही जोड़ने के लिए कुछ है?

मैं एक सवाल पूछना चाहता हूँ। कक्षा में कई संदर्भों का समर्थन करने पर प्रतिक्रिया क्यों नहीं होती है? लगता है कि API में बहुत सारे मुद्दे हल होने हैं और अभी बहुत अस्थिर हैं। has

static contextType = [themeContext, userContext]

const [theme, user] = this.context

मैं एक StoreProviders लागू करने जा रहा हूं जो कई संदर्भों को स्वचालित रूप से घोंसला बना सकता है।

const StoreProviders = constructStoreProviders(...storeContexts)

<StoreProviders>
  <Child />
</StoreProviders>

आपकी मदद के लिए धन्यवाद Dan! :)

@rabbitooops आपके पास हुक के साथ कौन से मुद्दे हैं? मैं उत्पादन में हुक का उपयोग करता हूं और वे मेरी टीम के लिए अच्छा काम करते हैं।

और इस बारे में क्या? अभी हुक का उपयोग करना सुरक्षित है। @gaearon

// A library
function useStoreProviders(Component, ...contexts) {
  contexts.forEach(context => Component.useProvider(context, someValue))
}

// User code
function App(props) {
  const [theme] = useState('white')

  // Safe to use `component hook`.
  App.useProvider(themeContext, theme)
  App.useShouldComponentUpdate(() => {})

  // Meanwhile, library can also use `component hook`.
  useStoreProviders(App, storeContext1, storeContext2, storeContext3)

  // Normal hook can't use `component hook`.
  customHook()

  /* ... */
}

<App />

decorateBeforeRender(App)

@rabbitooops https://github.com/reactjs/rfcs/issues/101

@rabbitooops स्टोर की बहु-परतों की नकल करने के लिए कुंजी के रूप में एकल स्टोर और सिंबल का उपयोग करने के बारे में कैसे?

data Store = Leaf Object | C Store Store

या जावास्क्रिप्ट में एक अपूर्ण तरीके से:

const LEFT = Symbol('LEFT')
const RIGHT = Symbol('RIGHT')
function createLeafStore = return new Store({});
function createStore(leftChild :: Store, rightChild :: Store) {
  return new Store({[LEFT]: leftChild, [Right]: rightChild})
}

@TrySound अलग: App.useProvider

@zhujinxuan मुझे खेद है, मैं आपसे नहीं मिल सकता।

@zhujinxuan आप उपयोग कर सकते हैं अनकहा , उदाहरण:

<Subscribe to={[AppContainer, CounterContainer, ...]}>
  {(app, counter, ...) => (
    <Child />
  )}
</Subscribe>

लगता है कि एपीआई में बहुत सारे मुद्दों को हल किया जाना है और अभी बहुत अस्थिर है

हम इसे एक या दो सप्ताह के भीतर जारी करने की तैयारी कर रहे हैं - यह सुनिश्चित नहीं है कि आपने इसका अनुमान क्यों लगाया है। वे जल्द ही तैयार हो जाएंगे हालांकि यदि आप सुरक्षित रहना चाहते हैं, तो कृपया स्थिर रिलीज तक प्रतीक्षा करें।

और इस बारे में क्या?

एक लूप में हुक को कॉल करना (जैसा कि आप forEach ) आमतौर पर अनुमति नहीं है। इस तरह से मुद्दों को सुलझाना आसान है।

useStoreProviders

दोनों useProvider और useShouldComponentUpdate हुक के रूप में समस्याग्रस्त हैं (यही वजह है कि रिएक्ट उनके पास नहीं है)। Https://github.com/facebook/react/issues/14534#issuecomment -455411117 पर मेरी प्रतिक्रिया देखें।

कुल मिलाकर, मैं इस मुद्दे के इरादे को समझने के लिए संघर्ष कर रहा हूं।

कई संदर्भों का उपभोग useContext हुक द्वारा हल किया जाता है। हम इसे एरेज़ के साथ किसी भी तरह "स्वचालित" करने की अनुशंसा नहीं करते हैं क्योंकि इससे ऐसे घटकों को लिखना बहुत आसान हो जाता है जो बहुत अधिक संदर्भों की सदस्यता लेते हैं और बहुत बार फिर से प्रस्तुत करते हैं। आपके पास एक स्पष्ट अर्थ होना चाहिए कि कौन सा घटक एक घटक को सुनता है, जो कि useContext API आपको देता है। यदि आपको चाहिए, तो आप useMyContexts() हुक लिख सकते हैं जो स्पष्ट रूप से विशिष्ट संदर्भों का उपयोग करता है। मैं आपको इसे गतिशील बनाने की सलाह नहीं देता, क्योंकि अगर सरणी की लंबाई बदलती है, तो यह टूट सकती है।

कई प्रदाताओं को "बॉयलरप्लेट" के रूप में देखा जा सकता है और हमारे पास अंततः इसके लिए एक समाधान हो सकता है। लेकिन मैं यह भी नहीं समझता कि आप इसे एक बड़ी समस्या के रूप में क्यों देखते हैं। इस थ्रेड के उदाहरण मेरे लिए इस मुद्दे को समझाने के लिए पर्याप्त यथार्थवादी नहीं हैं। मुझे JSX की कई परतों के साथ कुछ भी बुरा नहीं दिख रहा है जो एप्लिकेशन के शीर्ष पर कहीं है। बहुत यकीन है कि आपके पास अधिकांश घटकों में div घोंसले बहुत गहरे हैं और इससे बहुत अधिक चोट नहीं लगती है

मैं इसे बंद कर दूंगा क्योंकि मुझे लगता है कि मैंने पहले ही इन बिंदुओं पर जवाब दिया था, और चर्चा हलकों में जाती है। अगर कुछ याद आ रहा है तो मुझे बताएं।

OT: @gaearon , useRender जैसी कुछ जोड़ने की कोई योजना है या रेंडरिंग का अधिक नियंत्रण है? उदाहरण के लिए:

useRender(() => <div />, [...props])

दूसरे arg में useEffect हुक की समान भूमिका है।

useMemo आपका मित्र है।

Https://reactjs.org/docs/hooks-faq.html#how -to-memoize-गणना में दूसरा स्निपेट देखें।

मैं इस तरह एक कोड के साथ समाप्त हुआ:

function provider<T>(theProvider: React.Provider<T>, value: T) {
   return {
      provider: theProvider,
      value
   };
}

function MultiProvider(props: {providers: Array<{provider: any; value: any}>; children: React.ReactElement}) {
   let previous = props.children;
   for (let i = props.providers.length - 1; i >= 0; i--) {
      previous = React.createElement(props.providers[i].provider, {value: props.providers[i].value}, previous);
   }
   return previous;
}

तब मेरे शीर्ष-स्तरीय घटक प्रदान करते हैं:

public render() {
      return (
         <MultiProvider
            providers={[
               provider(Context1.Provider, this.context1),
               provider(Context2.Provider, this.context2),
               provider(Context3.Provider, this.context3),
               provider(Context4.Provider, this.context4),
               provider(Context5.Provider, this.context5),
            ]}
         ><AppComponents />
      </MultiProvider>
}

@gaearon

मुझे JSX की कई परतों के साथ कुछ भी बुरा नहीं दिख रहा है जो एप्लिकेशन के शीर्ष पर कहीं है।

मेरे पास ~ 15 निर्भरताएं हैं जो मैं उस तरीके से इंजेक्टेबल होना चाहता हूं, और इंडेंटेशन के 15 स्तर मेरे लिए बहुत सुंदर नहीं लगते हैं :)

@ 0xorial आपको वास्तव में इसके लिए एक घटक की आवश्यकता नहीं है, सब के बाद <> केवल एक फ़ंक्शन कॉल है React.createElement। तो आप इसे कंपोज़ फंक्शन में सरल बना सकते हैं जैसे:

const compose = (contexts, children) =>
  contexts.reduce((acc, [Context, value]) => {
    return <Context.Provider value={value}>{acc}</Context.Provider>;
  }, children);

और इसे इस प्रकार उपयोग करें:

import Context1 from './context1';
import Context2 from './context2';
import Context3 from './context3';
...
import Context15 from './context15';

const MyComponent = (props) => {
  // const value1..15 = ... get the values from somewhere ;

  return compose(
    [
      [Context1, value1],
      [Context2, value2],
      [Context3, value3],
      ...
      [Context15, value15],
    ],
    <SomeSubComponent/>
  );
}

मैंने अतीत में एक पुस्तकालय लिखा था जो इस मामले को संभालता है: https://github.com/disjukr/join-react-context

यह निश्चित रूप से कुछ ऐसा है जो हर समय अनुप्रयोगों में होता है। useContext एक घटक में प्रासंगिक डेटा _consuming_ के लिए बहुत अच्छा है, लेकिन जब आप कई प्रदाताओं वाले ऐप में _provide_ संदर्भ की आवश्यकता होती है तो यह बहुत अच्छा नहीं होता है।

यहां @alesmenzelsocialbakers समाधान का एक बंद विकल्प है:

const composeProviders = (...Providers) => (Child) => (props) => (
  Providers.reduce((acc, Provider) => (
    <Provider>
      {acc}
    </Provider>
  ), <Child {...props} />)
)

const WrappedApp = composeProviders(
  ProgressProvider,
  IntentsProvider,
  EntitiesProvider,
  MessagesProvider
)(App)

ReactDOM.render(<WrappedApp />, document.getElementById('root'));

नकारात्मक पक्ष यह है कि आपको प्रत्येक विशिष्ट प्रदाता घटक लिखना होगा।
उदाहरण:

export const ProgressProvider = ({ children }) => {
  const [progress, setProgress] = useState(0)

  return (
    <ProgressContext.Provider value={{ progress, setProgress }}>
      {children}
    </ProgressContext.Provider>
  )
}

मैंने एक राज्य प्रबंधन पुस्तकालय बनाया है जो सेवा संरचना में बेहतर है। यहाँ प्रदाता नरक से बचने का एक डेमो है । इसे आज़माने या इसके स्रोत (कोड की 100 लाइनें) पढ़ने के लिए स्वतंत्र महसूस करें!

यह संदर्भ प्रदाता को इकट्ठा करने के लिए एक "गुंजाइश" वस्तु का परिचय देता है, ताकि:

• सेवाओं को अलग या रचा जा सकता है, यह इस बात पर निर्भर करता है कि वे समान दायरे में हैं या नहीं।
  
  
  
  • सेवाएँ एक ही दायरे में पूर्व सेवाओं का उपभोग कर सकती हैं, इसके बावजूद वे एक ही घटक में हैं।
  
  
• स्कोप द्वारा एकत्र किए गए सभी प्रदाताओं को प्रदाता नरक से बचने, एक-एक करके प्रदान किया जा सकता है।

मैंने इस पर एक दरार भी ली। यह ठीक काम करने लगता है:

const composeWrappers = (
  wrappers: React.FunctionComponent[]
): React.FunctionComponent => {
  return wrappers.reduce((Acc, Current): React.FunctionComponent => {
    return props => <Current><Acc {...props} /></Current>
  });
}

उपयोग है:

const SuperProvider = composeWrappers([
    props => <IntlProvider locale={locale} messages={messages} children={props.children} />,
    props => <ApolloProvider client={client}>{props.children}</ApolloProvider>,
    props => <FooContext.Provider value={foo}>{props.children}</FooContext.Provider>,
    props => <BarContext.Provider value={bar}>{props.children}</BarContext.Provider>,
    props => <BazContext.Provider value={baz}>{props.children}</BazContext.Provider>,
  ]);
  return (
    <SuperProvider>
      <MainComponent />
    </SuperProvider>
  );

मैंने इस हेल्पर को एक npm लाइब्रेरी react-compose-wrappers रूप में भी प्रकाशित किया

निम्नलिखित दिखाता है कि मैं कैसे प्रमाणीकृत उपयोगकर्ता के आसपास घटकों के लिए गुजर रहा हूं जिन्हें इसकी आवश्यकता है।

मैंने अपने आवेदन के लिए एक राज्य बनाने का निर्णय लिया। अपनी State.js फ़ाइल में मैंने अपनी प्रारंभिक स्थिति, संदर्भ, Reducer, प्रदाता और हुक सेट किया।

import React, { createContext, useContext, useReducer } from 'react';

const INITIAL_STATE = {}

const Context = createContext();

const reducer = (state, action) => 
  action 
    ? ({ ...state, [action.type]: action[action.type] }) 
    : state;

export const Provider = ({ children }) => (
  <Context.Provider value={ useReducer(reducer, INITIAL_STATE) }>
    { children }
  </Context.Provider>
);

const State = () => useContext(Context);

export default State;

फिर अपने index.js फ़ाइल में मैंने प्रदाता में अपना ऐप लपेटा।

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from './State';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root'),
);

एक घटक में राज्य का उपभोग करने के लिए मैं हुक का उपयोग कर सकता हूं। मैं राज्य को अपडेट करने के लिए प्रेषण का भी उपयोग कर सकता हूं। उदाहरण के लिए यदि मैं उपयोगकर्ता प्राप्त करना या सेट करना चाहता हूं।

import React, {useEffect} from 'react';
import State from './State'

const ExampleComponent = () => {
  const [{ user }, dispatch] = State(); 

  useEffect(() => {
    const getUser = async () => {
      const data = await fetch('http://example.com/user.json');  // However you get your data
      dispatch({ type: 'user', user: data });
    }
    getUser();
  }, [dispatch]);

  // Don't render anything until user is retrieved
  // The user is undefined since I passed an empty object as my initial state
  if(user === undefined) return null; 

  return(
    <p>{user.name}</p>
  );
}

export default ExampleComponent;

मुझे लगता है कि इस तरह से मुझे राज्य के निर्माण की स्वतंत्रता मिलती है कि मुझे एक टन अतिरिक्त संदर्भों को जोड़ने के बिना इसकी आवश्यकता कैसे है और प्रदाताओं के गहरे घोंसले से बचने में मेरी मदद करता है।

आने वाले हुक एपीआई संदर्भों का उपभोग करने का एक अलग तरीका प्रदान करते हैं।

https://reactjs.org/docs/hooks-reference.html#usecontext

मैं इसे कक्षा घटक में कैसे उपयोग करूं?

आने वाले हुक एपीआई संदर्भों का उपभोग करने का एक अलग तरीका प्रदान करते हैं।
https://reactjs.org/docs/hooks-reference.html#usecontext

मैं इसे कक्षा घटक में कैसे उपयोग करूं?

लेखन कक्षाओं के बिना विभिन्न प्रतिक्रिया सुविधाओं का लाभ लेने के लिए उपयोग किए जाने वाले हुक नहीं हैं?
खैर, यही है, सब कुछ जो विभिन्न हुक करते हैं, पहले से ही कक्षाओं में मौजूद हैं। यदि आप सुविधाजनक वाक्य रचना और उपयोग एपी के बारे में बात कर रहे हैं, तो प्रतिक्रिया कक्षाओं से कार्यात्मक घटकों तक चली जाती है, इसलिए फ़ंक्शन और हुक में आपका स्वागत है)

मैंने vue3 के साथ समान एपीआई प्रदान करके समस्या को हल करने के लिए एक पैकेज बनाया

https://github.com/TotooriaHyperion/react-multi-provide

• समस्या को हल करें जो संदर्भ को प्रतिक्रिया देता है अतिरिक्त दृश्य पेड़ लेता है।
• यह भी कि क्या इंजेक्ट किया गया था की प्रतिक्रियाशीलता को संरक्षित करें
• प्रदाताओं के बीच भग्न
• निर्भरता को संग्रहीत करने के लिए WeakMap का उपयोग करें
• बेहतर टाइपस्क्रिप्ट समर्थन, निर्भरता इंजेक्शन और डिबग अनुभव प्राप्त करने के लिए ऑब्जेक्ट लिपटे प्रतीक का उपयोग करें

सूचना:

• मैं आपको संदर्भ की प्रतिक्रियाशीलता पर बहुत अधिक भरोसा करने की सलाह नहीं देता, क्योंकि यह डेटा तक पहुंच प्रदान करने के बजाय @gaearon ने कहा है कि बहुत सारे संदर्भों के लिए सदस्यता नहीं सही थी। लेकिन उन्होंने उल्लेख नहीं किया कि संदर्भ की प्रतिक्रिया पर भरोसा करके डेटा सदस्यता को हल करने के लिए यह एक गलत पैटर्न है । इसलिए सही बात यह है कि कई संदर्भों का उपयोग न करें बल्कि एक संदर्भ में अपनी निर्भरता प्रदान करें । और इस बीच, अपने संदर्भों को यथासंभव स्थिर रखें।
• और इस प्रकार, यदि हम एक बेहतर एपीआई चाहते हैं, तो हमें इसे स्वयं संभालने की आवश्यकता है, और एपीआई को भग्न बनाने के लिए ध्यान में रखना चाहिए। यही मेरा पैकेज है।

Outer.tsx

import React, { useMemo } from "react";
import { Providers, useCreateContexts, useProvide } from "../..";
import { createService, ServiceA } from "./service";

export const Outer: React.FC = ({ children }) => {
  const contexts = useCreateContexts();
  const service = useMemo(createService, []);
  useProvide(contexts, ServiceA.id, service);
  return <Providers contexts={contexts}>{children}</Providers>;
};

Inner2.tsx

import React from "react";
import { useContexts, useReplaySubject } from "../..";
import { ServiceA } from "./service";

export const Inner2: React.FC = () => {
  const [
    {
      state$,
      actions: { inc, dec },
    },
  ] = useContexts([ServiceA.id]);
  const count = useReplaySubject(state$);
  return (
    <>
      <p>{count}</p>
      <div>
        <button onClick={inc}>Increment</button>
        <button onClick={dec}>Decrement</button>
      </div>
    </>
  );
};

यहाँ है कि मैं यह कैसे कर सकता हूँ:

interface Composable {
    (node: React.ReactNode): React.ReactElement
}

const composable1: Composable = (node)=>{
      return <someContext.Provider>{node}</someContext.Provider>
}

function Comp({children}:{children?:React.ReactNode}){
       return pipe(
             composabl1, composabl2, composable3
       )(children)
}

आप कई लोकप्रिय पुस्तकालयों जैसे rxjs में pipe फ़ंक्शन पा सकते हैं, इस पाइपलाइन जैसी कार्रवाई के लिए कई भाषा-स्तर के प्रस्ताव भी हैं। एक और परिवाद का उपयोग करके इसे 'हल' करने की कोई आवश्यकता नहीं है।