প্রতিক্রিয়া-রেডাক্সে ত্রুটি পরিচালনা করার সঠিক উপায়

Question

প্রতিক্রিয়া-রেডাক্সের সাথে ত্রুটিটি পরিচালনা করার সাধারণ বা সঠিক উপায়টি কী তা আমি বুঝতে চাই।

মনে করুন, আমার কাছে ফোন নম্বর সাইন আপ উপাদান রয়েছে।

ইনপুট ফোন নম্বরটি অবৈধ কিনা সেই অংশটি ত্রুটি ছুঁড়ে বলে

এই ত্রুটিটি হ্যান্ডেল করার সর্বোত্তম উপায় কী হবে?

আইডিয়া 1: একটি উপাদান তৈরি করুন, যা ত্রুটি নেয় এবং যখনই কোনও ত্রুটি এটিতে দেওয়া হয় তখন একটি ক্রিয়া প্রেরণ করে

ধারণা 2: যেহেতু ত্রুটিটি সেই উপাদানটির সাথে সম্পর্কিত তাই সেই ত্রুটিটি কোনও উপাদানকে দিন (যা রিডেক্সের সাথে সংযুক্ত নয় অর্থাৎ ত্রুটি হ্যান্ডলারের উপাদানটি ক্রিয়া প্রেরণ করবে না)

প্রশ্ন: বড় আকারের অ্যাপ্লিকেশনটির জন্য কেউ কি প্রতিক্রিয়া-রেডাক্সে ত্রুটি পরিচালনা করার সঠিক পথে আমাকে গাইড করতে পারে?

Comments

ব্যবহারকারী কিছু বা তাত্ক্ষণিকভাবে কিছু করার পরে, ফোন নম্বরটির বৈধতা কীভাবে ঘটে যায়, সুসংগত বা অ্যাসিনক্রোনাস হয়? আপনি কী হতে চান, ব্যবহারকারীর কাছে দৃশ্যমান? রেডাক্স আপনার অ্যাপ্লিকেশনের রাজ্য সংরক্ষণের জন্য, এটি আপনার প্রশ্নের সাথে কিছুটা সম্পর্কিত নয় বলে মনে হচ্ছে।

— রিমকো জারলিচ

Answer 1

আমি বলব যে আপনার প্রাথমিক ধারণাগুলির কোনওটিই পুরো ছবিটি ধারণ করে না। আইডিয়া 1 কেবল কলব্যাক is আপনি যদি একটি কলব্যাক ব্যবহার করতে চাইলে: useCallback। আইডিয়া 2 কাজ করবে এবং যদি আপনাকে রিডুএক্স ব্যবহারের প্রয়োজন না হয় তবে সেগুলি পছন্দনীয়। কখনও কখনও আপনি রিডুএক্স ব্যবহার করা ভাল। হতে পারে আপনি ইনপুট ক্ষেত্রগুলির কোনওটিতেই ত্রুটি বা এর অনুরূপ কিছু নেই যাচাই করে ফর্মের বৈধতা নির্ধারণ করছেন। যেহেতু আমরা রিডুএক্সের বিষয়বস্তুতে আছি তাই ধরে নেওয়া যাক এটিই কেস।

রিডুএক্সের সাথে ত্রুটি পরিচালনার জন্য সর্বোত্তম পদ্ধতির মধ্যে একটি ত্রুটি ক্ষেত্র থাকা অবস্থায় থাকে যা পরে ত্রুটি উপাদানকে দেওয়া হয়।

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

ত্রুটির উপাদানটি কেবল একটি ত্রুটি প্রদর্শন করতে হবে না, এটি এর সাথে পার্শ্ব প্রতিক্রিয়াও করতে পারে useEffect।

ত্রুটিটি কীভাবে সেট করা / আনসেট করা হয় তা আপনার আবেদনের উপর নির্ভর করে। আসুন আপনার ফোন নম্বর উদাহরণ ব্যবহার করুন।

1. যদি বৈধতা যাচাই একটি খাঁটি ফাংশন হয় তবে এটি হ্রাসকারক দ্বারা করা যেতে পারে।

তারপরে আপনি ফোন নম্বর পরিবর্তনের ক্রিয়াগুলির প্রতিক্রিয়া হিসাবে ত্রুটি ক্ষেত্রটি সেট বা আনসেট করবেন। একটি স্যুইচ স্টেটমেন্ট দিয়ে তৈরি একটি রিডুসারে এটি এর মতো দেখতে পারে।

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

২. যদি ব্যাকএন্ডের দ্বারা ত্রুটিগুলি প্রতিবেদন করা হয় তবে ত্রুটি ক্রিয়াগুলি প্রেরণ করুন।

ধরা যাক আপনি ফোন নম্বরটি কোনও ব্যাকএন্ডে প্রেরণ করছেন যা নম্বরটি দিয়ে কিছু করার আগে যাচাইকরণ করে। ডেটা ক্লায়েন্টের পক্ষে বৈধ কিনা আপনি জানতে পারবেন না। আপনাকে কেবল এটির জন্য সার্ভারের শব্দটি নিতে হবে।

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],
);

রিডুসারটি ত্রুটির জন্য উপযুক্ত বার্তা নিয়ে এসে সেট করতে হবে।

ত্রুটিটি আনসেট করতে ভুলবেন না। আপনি কোনও পরিবর্তন ক্রিয়াতে বা অ্যাপ্লিকেশনটির উপর নির্ভর করে অন্য কোনও অনুরোধ করার সময় ত্রুটিটি আনসেট করতে পারেন।

আমি যে দুটি পদ্ধতির উল্লেখ করেছি তা পারস্পরিক একচেটিয়া নয়। আপনি স্থানীয়ভাবে সনাক্তযোগ্য ত্রুটিগুলি প্রদর্শন করতে প্রথমটি ব্যবহার করতে পারেন এবং সার্ভারের পাশ বা নেটওয়ার্ক ত্রুটিগুলি প্রদর্শন করতে দ্বিতীয়টি ব্যবহার করতে পারেন।

Comments

আমি আপনার প্রতিক্রিয়ার প্রশংসা করি এবং এটি আমি যা করি তার তুলনায় এটি অবশ্যই আরও ভাল পদ্ধতির দেখায়। আমি এখনও আরও কিছু পরামর্শ সন্ধান করছি এবং তাই আমি এই প্রশ্নে অনুগ্রহ শুরু করেছি।

— anny123

Answer 2

আমি হ'ল বৈধতা সহ একটি ফর্মিক ব্যবহার করব। তারপরে, সার্ভার-সাইড ত্রুটির জন্য আমি এই জাতীয় কিছু ব্যবহার করব:

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>;
};

Comments

আকর্ষণীয় এনার্কো দেখে মনে হচ্ছে, উত্তর দেওয়ার জন্য ধন্যবাদ :)

— anny123

Answer 3

আপনি কী ধরণের ত্রুটি পরিচালনা করছেন তার উপর এটি নির্ভর করে। যদি এটি কেবল ফর্ম বৈধকরণ হ্যান্ডলিং হয় তবে আমি মনে করি না যে এর জন্য আপনার রেডাক্সের প্রয়োজন - দয়া করে এই নিবন্ধটি পড়ুন । যদি আপনার ত্রুটিটি সেই উপাদানটির মধ্যে কেবল "গ্রাস" হতে চলেছে তবে কেন এটি পুনর্নির্মাণে প্রেরণ করবেন? আপনি তার জন্য আপনার স্থানীয় রাজ্যটি সহজেই ব্যবহার করতে পারেন।

অন্যদিকে, আপনি যদি কোনও ধরণের ত্রুটি বিজ্ঞপ্তি ব্যবহারকারীর কাছে প্রদর্শন করতে চান যে সাইটে কোনও HTTP কল ব্যর্থ হয়েছে কিনা তা নির্দেশ করে, আপনি আপনার অ্যাপ্লিকেশনটির সমস্ত অংশ থেকে ত্রুটি প্রেরণ করে (বা এমনকি সাধারণভাবে আপনার মিডলওয়্যার) রিডুএক্সের সাথে উপকৃত হতে পারেন

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
}

আপনার রাষ্ট্রটি কীভাবে সংগঠিত হতে চলেছে এবং আপনাকে কোনও রাজ্যকে রেডেক্সে স্থাপন করতে হবে বা কেবল আপনার উপাদানটির স্থানীয় অবস্থায় রাখতে হবে তা আপনাকে নির্ধারণ করতে হবে। আপনি রিডুএক্সে সমস্ত কিছু রাখতে পারেন, তবে ব্যক্তিগতভাবে আমি বলব এটি একটি ওভারকিল - কেন আপনি যদি উপাদান অংশ Y তে রাষ্ট্র X রাখেন তবে আপনি কেন রাজ্য X এর সাথে যত্নশীল? যদি আপনি আপনার কোডটি সঠিকভাবে গঠন করেন তবে আপনার সেই অবস্থাকে পরে স্থানীয় থেকে রূডক্সে স্থানান্তরিত করতে সমস্যা হবে না, যদি কোনও কারণে আপনার অ্যাপ্লিকেশনটির অন্যান্য অংশগুলি সেই অবস্থার উপর নির্ভর করতে শুরু করে।

Answer 4

আমি এটি সম্পর্কে এইভাবে মনে করি, রাষ্ট্রের কী হওয়া উচিত? এবং রাষ্ট্র থেকে প্রাপ্ত করা উচিত? রাজ্য রিডুএক্সে সঞ্চয় করা উচিত এবং ডেরাইভেশন গণনা করা উচিত।

একটি ফোন নম্বর রাষ্ট্র, যা ক্ষেত্রের ফোকাস রয়েছে তা রাষ্ট্রীয়, তবে এটি বৈধ কিনা এবং তা রাজ্যের মান থেকে পাওয়া যায়।

আমি ক্যাশে ডেরাইভেশনগুলিতে পুনরায় নির্বাচন করুন এবং প্রাসঙ্গিক রাষ্ট্রটি পরিবর্তন না করা হলে একই ফলাফলগুলি ব্যবহার করব।

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

তারপরে আপনি মানটিকে পছন্দ করে এমন সমস্ত উপাদানগুলিতে মানচিত্রের স্টেটটপ্রপগুলিতে নির্বাচকটি ব্যবহার করতে পারেন, এবং আপনি এটি async ক্রিয়ায়ও ব্যবহার করতে পারেন। যদি ফোকাসটি পরিবর্তিত হয় না, বা ক্ষেত্রের মান পরিবর্তিত হয় না, তবে পুনরায় গণনা হবে না, পরিবর্তে এটি পূর্ববর্তী মানটি ফিরিয়ে দেবে।

আমি একাধিক টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো টুকরো করে কীভাবে একত্রিত হতে পারে তা দেখানোর জন্য আমি নির্বাচিত রাষ্ট্র চেক যুক্ত করছি।

আমি ব্যক্তিগতভাবে আমার রাষ্ট্রকে যতটা সম্ভব ছোট রাখার চেষ্টা করি। উদাহরণস্বরূপ, ধরা যাক আপনি নিজের ক্যালেন্ডার তৈরি করতে চেয়েছিলেন। আপনি কি প্রতিটি একদিনই রাজ্যে সংরক্ষণ করবেন, বা আপনার এখনকার বছরের এবং মাসের মতো কয়েকটি দেখা দরকার যা বর্তমানে দেখা হচ্ছে। এই মাত্র 2 টুকরো রাষ্ট্রের সাহায্যে আপনি কোনও ক্যালেন্ডারে প্রদর্শন করার জন্য দিনগুলি গণনা করতে পারেন, এবং এর মধ্যে একটির পরিবর্তন না হওয়া পর্যন্ত পুনরায় গণনা করার প্রয়োজন নেই এবং এই পুনঃব্যবস্থাটি কার্যত স্বয়ংক্রিয়ভাবে ঘটবে, তারা যেভাবে করতে পারে তার সমস্ত উপায় সম্পর্কে ভাবার দরকার নেই পরিবর্তন.