React-Redux में त्रुटि से निपटने का सही तरीका

11

मैं यह समझना चाहता हूं कि रिएक्ट-रेडक्स के साथ त्रुटि से निपटने का सामान्य या अधिक सामान्य तरीका क्या है।

मान लीजिए, मेरे पास फोन नंबर साइन अप घटक है।

यदि घटक फ़ोन नंबर अमान्य है, तो वह घटक एक त्रुटि कहता है

उस त्रुटि को संभालने का सबसे अच्छा तरीका क्या होगा?

विचार 1: एक घटक बनाएं, जो एक त्रुटि लेता है और जब भी एक त्रुटि पारित की जाती है, तब एक कार्रवाई को भेजता है

विचार 2: चूंकि त्रुटि उस घटक से संबंधित है, इसलिए उस त्रुटि को एक घटक से गुजारें (जो कि रिड्यूक्स से जुड़ा नहीं है। त्रुटि हैंडलर घटक कार्रवाई नहीं भेजेगा)

प्रश्न: क्या कोई मुझे बड़े पैमाने के ऐप के लिए रिएक्ट-रेडक्स में त्रुटि से निपटने के उचित तरीके से मार्गदर्शन कर सकता है?

reactjs redux

— anny123
स्रोत

1

उपयोगकर्ता द्वारा कुछ या तुरंत करने के बाद फ़ोन नंबर का सत्यापन कैसे होता है, सिंक्रोनस या एसिंक्रोनस? आप क्या करना चाहते हैं, उपयोगकर्ता को दिखाई दे रहा है Redux आपके ऐप की स्थिति को संग्रहीत करने के लिए है, यह आपके प्रश्न से थोड़ा असंबंधित है।

— रेमकोगर्लिच

3

मैं कहूंगा कि आपके प्रारंभिक विचारों में से कोई भी पूरी तस्वीर को कैप्चर नहीं करता है। आइडिया 1 सिर्फ एक कॉलबैक है। यदि आप कॉलबैक का उपयोग करना चाहते हैं:useCallback :। यदि आप Redux का उपयोग करने की आवश्यकता नहीं है, तो आइडिया 2 काम करेगा और बेहतर होगा। कभी-कभी आप redux का उपयोग करना बेहतर समझते हैं। हो सकता है कि आप जाँच वैधता सेट कर रहे हों कि किसी भी इनपुट फ़ील्ड में त्रुटि या कुछ समान नहीं है। चूंकि हम रेडक्स के विषय पर हैं, इसलिए मान लेते हैं कि ऐसा ही है।

आमतौर पर रिडक्स के साथ त्रुटि से निपटने का सबसे अच्छा तरीका यह है कि राज्य में एक त्रुटि फ़ील्ड है जो तब एक त्रुटि घटक के पास है।

const ExampleErrorComponent= () => {
  const error = useSelector(selectError);
  if (!error) return null;
  return <div className="error-message">{error}</div>;
}

त्रुटि घटक को केवल एक त्रुटि प्रदर्शित करने की आवश्यकता नहीं है, यह साइड इफेक्ट भी कर सकता है useEffect।

त्रुटि कैसे सेट की जाती है / परेशान है यह आपके आवेदन पर निर्भर करता है। चलो अपने फोन नंबर उदाहरण का उपयोग करें।

1. यदि वैधता की जाँच एक शुद्ध कार्य है, तो इसे रिड्यूसर में किया जा सकता है।

तब आप फ़ोन नंबर परिवर्तन क्रियाओं के जवाब में त्रुटि क्षेत्र सेट या अनसेट कर देंगे। एक स्विच बयान के साथ निर्मित reducer में यह इस तरह दिख सकता है।

case 'PHONE_NUMBER_CHANGE':
  return {
    ...state,
    phoneNumber: action.phoneNumber,
    error: isValidPhoneNumber(action.phoneNumber) ? undefined : 'Invalid phone number',
  };

2. यदि त्रुटियों को बैकएंड द्वारा सूचित किया जाता है, तो त्रुटि कार्रवाई भेजते हैं।

मान लें कि आप फ़ोन नंबर को एक बैकएंड पर भेज रहे हैं जो संख्या के साथ कुछ करने से पहले सत्यापन करता है। आपको पता नहीं चल सकता है कि डेटा क्लाइंट की तरफ वैध है या नहीं। आपको इसके लिए बस सर्वर का शब्द लेना होगा।

const handleSubmit = useCallback(
  () => sendPhoneNumber(phoneNumber)
    .then(response => dispatch({
      type: 'PHONE_NUMBER_SUBMISSION_SUCCESS',
      response,
    }))
    .catch(error => dispatch({
      type: 'PHONE_NUMBER_SUBMISSION_FAILURE',
      error,
    })),
  [dispatch, phoneNumber],
);

फिर reducer को त्रुटि के लिए एक उपयुक्त संदेश के साथ आना चाहिए और इसे सेट करना चाहिए।

त्रुटि अनसेट करने के लिए मत भूलना। आप एक परिवर्तन कार्रवाई पर या आवेदन के आधार पर एक और अनुरोध करते समय त्रुटि को परेशान कर सकते हैं।

मेरे द्वारा बताए गए दो दृष्टिकोण परस्पर अनन्य नहीं हैं। आप स्थानीय रूप से पता लगाने योग्य त्रुटियों को प्रदर्शित करने के लिए पहले का उपयोग कर सकते हैं और सर्वर साइड या नेटवर्क त्रुटियों को प्रदर्शित करने के लिए दूसरे का उपयोग कर सकते हैं।

— जेमी सालो
स्रोत

मैं आपकी प्रतिक्रिया की सराहना करता हूं और यह निश्चित रूप से मैं जो करता हूं उसकी तुलना में बेहतर दृष्टिकोण दिखता है। मैं अभी भी कुछ और सुझावों की तलाश कर रहा हूं और इसलिए मैंने इस प्रश्न पर एक इनाम शुरू किया है।

— anny123

1

मैं yup सत्यापन के साथ एक फॉर्मिक का उपयोग करूंगा। फिर, सर्वर-साइड त्रुटि के लिए मैं कुछ इस तरह का उपयोग करेगा:

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Spinner } from "@blueprintjs/core";

export default ({ action, selector, component, errorComponent }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(action());
  }, [dispatch, action]);

  const DispatchFetch = () => {
    const { data, isRequesting, error } = useSelector(selector());
    if (!isRequesting && data) {
      const Comp = component;
      return <Comp data={data}></Comp>;
    } else if (error) {
      if (errorComponent) {
        const ErrorComp = errorComponent;
        return <ErrorComp error={error}></ErrorComp>;
      }
      return <div>{error}</div>;
    }
    return <Spinner></Spinner>;
  };

  return <DispatchFetch></DispatchFetch>;
};

— anerco
स्रोत

दिलचस्प अरको लगता है, जवाब देने के लिए धन्यवाद :)

— anny123

1

यह इस बात पर निर्भर करता है कि आप किस तरह की त्रुटि से निपटने की बात कर रहे हैं। अगर यह केवल फॉर्मेशन हैंडलिंग है तो मुझे नहीं लगता कि आपको इसके लिए Redux की जरूरत है - कृपया इस लेख को पढ़ें । यदि आपकी त्रुटि केवल उस घटक के भीतर "भस्म" होने वाली है, तो इसे रिडक्स में क्यों भेजें? आप इसके लिए अपने स्थानीय राज्य का उपयोग आसानी से कर सकते हैं।

दूसरी ओर, यदि आप उपयोगकर्ता को किसी प्रकार की त्रुटि सूचना दिखाना चाहते हैं, जो यह दर्शाता है कि साइट पर कोई भी HTTP कॉल विफल हो गई है, तो आप अपने आवेदन के सभी हिस्सों (या यहां तक कि अपने मिडलवेयर) से त्रुटि को भेजकर Redux के साथ लाभ उठा सकते हैं।

dispatch({ type: 'SET_ERROR_MESSAGE', error: yourErrorOrMessage });

// simple error message reducer
function errorMessage(state = null, action) {
  const { type, error } = action;

  switch (type) {
      case 'RESET_ERROR_MESSAGE':
          return null;
      case 'SET_ERROR_MESSAGE':
          return error;
  }

  return state
}

आपको यह परिभाषित करने की आवश्यकता है कि आपका राज्य कैसे व्यवस्थित होने जा रहा है और क्या आपको कुछ राज्य को रिडक्स में रखने की आवश्यकता है या बस इसे अपने घटक की स्थानीय स्थिति में रखें। आप सब कुछ redux में डाल सकते हैं, लेकिन व्यक्तिगत रूप से मैं कहूंगा कि यह एक ओवरकिल है - आप घटक Y में राज्य X क्यों डालेंगे यदि केवल घटक Y उस राज्य के बारे में परवाह करता है? यदि आप अपने कोड को सही ढंग से संरचना करते हैं, तो आपको उस स्थिति को स्थानीय से बाद में फिर से चालू करने में समस्या नहीं होनी चाहिए, यदि किसी कारण से आपके ऐप के अन्य हिस्से उस स्थिति पर निर्भर करना शुरू करते हैं।

— zhuber
स्रोत

1

मैं इसके बारे में इस तरह सोचता हूं, क्या होना चाहिए? और राज्य से क्या प्राप्त किया जाना चाहिए? राज्य को रिडक्स में संग्रहीत किया जाना चाहिए, और व्युत्पन्न की गणना की जानी चाहिए।

एक फोन नंबर राज्य है, जिस क्षेत्र पर ध्यान केंद्रित किया गया है वह राज्य है, लेकिन यह वैध है या नहीं, यह राज्य के मूल्यों से लिया जा सकता है।

मैं Reselect का उपयोग व्युत्पन्न को कैश करने के लिए करूंगा और उसी परिणाम को वापस करूंगा जब संबंधित राज्य को संशोधित नहीं किया गया हो।

export const showInvalidPhoneNumberMessage = createSelector(
  getPhoneValue,
  getFocusedField,
  (val, focus) => focus !== 'phone' && val.length < 10 // add other validations.
)

फिर आप सभी घटकों में MapStateToProps में चयनकर्ता का उपयोग कर सकते हैं जो इस मूल्य की परवाह कर सकते हैं, और आप इसे async क्रियाओं में भी उपयोग कर सकते हैं। यदि फ़ोकस नहीं बदला है, या फ़ील्ड का मान नहीं बदला है, तो कोई पुनर्गणना नहीं होगी, यह इसके बजाय पिछले मान को लौटाएगा।

मैं चयनित राज्य चेक को केवल यह दिखाने के लिए जोड़ रहा हूं कि एक व्युत्पत्ति के परिणामस्वरूप राज्य के कई टुकड़े एक साथ कैसे आ सकते हैं।

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

— अमीर हरा
स्रोत