প্রতিক্রিয়া প্রয়োগে পরিষেবাদি রয়েছে

Question

আমি কৌণিক জগত থেকে আসছি যেখানে আমি কোনও পরিষেবা / কারখানায় যুক্তি বের করতে এবং এগুলি আমার নিয়ামকগুলিতে গ্রাস করতে পারি।

আমি কীভাবে একটি প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে এটি অর্জন করতে পারি তা বোঝার চেষ্টা করছি।

ধরা যাক যে আমার কাছে এমন একটি উপাদান রয়েছে যা ব্যবহারকারীর পাসওয়ার্ড ইনপুটকে বৈধ করে তোলে (এটি শক্তি)। এটি যুক্তিযুক্ত বেশ জটিল তাই আমি নিজে এটির উপাদানটিতে এটি লিখতে চাই না।

আমি এই যুক্তিটি কোথায় লিখব? একটি দোকানে যদি আমি ফ্লাক্স ব্যবহার করছি? নাকি এর চেয়ে ভাল বিকল্প আছে?

Comments

আপনি একটি প্যাকেজ ব্যবহার করতে পারেন এবং দেখুন তারা কীভাবে তা করছে - npmjs.com/package/react-password-strength-meter

— জেমস 111

পাসওয়ার্ড শক্তি কেবল একটি উদাহরণ। আমি আরও সাধারণ সেরা অনুশীলনের সন্ধান করছি

— ডেনিস নেরুশ

আপনি এটি সার্ভার পাশ করতে পারে?

— জেমস 111

না। কেবল ক্লায়েন্টের পক্ষে যুক্তি যা সরাসরি উপাদানগুলিতে থাকা উচিত নয়। পাসওয়ার্ড শক্তি পরীক্ষক মাত্র একটি উদাহরণ

— ডেনিস নেরুশ

আপনার যদি এ জাতীয় অনেকগুলি ক্রিয়াকলাপ থাকে তবে আপনি সেগুলি কোনও সহায়ক ফাইলে সংরক্ষণ করতে পারেন এবং এটি ব্যবহারের জন্য আপনার উপাদান ফাইলের মধ্যে প্রয়োজন। যদি এটি কোনও একক ক্রিয়াকলাপ যা কেবলমাত্র সেই উপাদানটির সাথেই প্রাসঙ্গিক হয় তবে সম্ভবত সেখানে জটিলতা থাকার কোনও কারণ নেই live

— জেসি কার্নাগন

Answer 1

প্রথম উত্তরটি বর্তমান কনটেইনার বনাম উপস্থাপক দৃষ্টান্ত প্রতিফলিত করে না ।

আপনার যদি কোনও পাসওয়ার্ড যাচাই করার মতো কিছু করার দরকার হয় তবে আপনার সম্ভবত এটির কোনও ফাংশন রয়েছে। আপনি সেই ফাংশনটি প্রপস হিসাবে আপনার পুনরায় ব্যবহারযোগ্য দৃশ্যে পৌঁছে দিবেন।

পাত্রে

সুতরাং, এটি করার সঠিক উপায়টি হ'ল একটি ভ্যালিডেটার কনটেনার লিখুন, যার সম্পত্তি হিসাবে সেই ফাংশন থাকবে এবং এতে ফর্মটি মোড়ানো হবে, ডান প্রসেসগুলি সন্তানের কাছে প্রবেশ করবে। যখন এটি আপনার দৃষ্টিতে আসে তখন আপনার বৈধ কন্টেইনারটি আপনার ভিউটি আবৃত করে এবং ভিউটি ধারকগুলির যুক্তি গ্রাস করে।

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

প্রোভাইডার

যদি আরও কিছুটা কনফিগারেশন প্রয়োজন হয় তবে আপনি সরবরাহকারী / গ্রাহক মডেল ব্যবহার করতে পারেন। সরবরাহকারী একটি উচ্চ স্তরের উপাদান যা উপরের অ্যাপ্লিকেশন বস্তুর (যাকে আপনি মাউন্ট করেন) এর কাছাকাছি এবং নীচে কোথাও আবৃত হয় এবং প্রসঙ্গ API এ নিজের একটি অংশ বা উপরের স্তরে কনফিগার করা সম্পত্তি সরবরাহ করে। আমি প্রসঙ্গটি গ্রাস করার জন্য আমার ধারক উপাদানগুলি সেট করেছিলাম।

পিতামাতার / সন্তানের প্রসঙ্গে সম্পর্কের একে অপরের কাছাকাছি থাকতে হবে না, কেবল কোনও উপায়ে সন্তানের অবতরণ করতে হবে। রেডাক্স স্টোর এবং এইভাবে প্রতিক্রিয়া রাউটার ফাংশন। আমি এটি আমার বিশ্রামের ধারকগুলির জন্য মূল বিশ্রামের প্রসঙ্গটি সরবরাহ করতে ব্যবহার করেছি (যদি আমি নিজের নিজের সরবরাহ না করি)।

(দ্রষ্টব্য: প্রসঙ্গটি এপিআই ডক্সে পরীক্ষামূলকভাবে চিহ্নিত হয়েছে, তবে এটি কী ব্যবহার করছে তা বিবেচনা করে আমি এটিকে আর মনে করি না)।

//An example of a Provider component, takes a preconfigured restful.js
//object and makes it available anywhere in the application
export default class RestfulProvider extends React.Component {
	constructor(props){
		super(props);

		if(!("restful" in props)){
			throw Error("Restful service must be provided");
		}
	}

	getChildContext(){
		return {
			api: this.props.restful
		};
	}

	render() {
		return this.props.children;
	}
}

RestfulProvider.childContextTypes = {
	api: React.PropTypes.object
};

মিডলওয়্যার

আমি আরও চেষ্টা করে দেখি নি, তবে ব্যবহার দেখেছি, রেডাক্সের সাথে মিলে মিডলওয়্যার ব্যবহার করা। আপনি অ্যাপ্লিকেশনের বাইরে বা কমপক্ষে, রেডেক্স স্টোরের চেয়ে বেশি আপনার পরিষেবা অবজেক্টটি সংজ্ঞায়িত করেন। স্টোর তৈরির সময়, আপনি মিডলওয়্যারের সাথে পরিষেবাটি ইনজেক্ট করেন এবং মিডলওয়্যার পরিষেবাটি প্রভাবিত করে এমন কোনও ক্রিয়াকলাপ পরিচালনা করে।

এইভাবে, আমি আমার রেস্টফুল.জেএস বস্তুকে মিডওয়্যারটিতে ইনজেক্ট করতে এবং আমার ধারক পদ্ধতিগুলি স্বাধীন ক্রিয়াকলাপের সাথে প্রতিস্থাপন করতে পারি। ফর্ম ভিউ স্তরের ক্রিয়াগুলি সরবরাহ করতে আমার এখনও একটি ধারক উপাদান প্রয়োজন, তবে সংযুক্ত () এবং মানচিত্রডিস্পচটপোপ্রোপগুলি আমাকে সেখানে haveেকে রেখেছে।

নতুন ভি 4 রিএ্যাক্ট-রাউটার-রিডুএক্স ইতিহাসের অবস্থাকে প্রভাবিত করতে এই পদ্ধতিটি ব্যবহার করে।

//Example middleware from react-router-redux
//History is our service here and actions change it.

import { CALL_HISTORY_METHOD } from './actions'

/**
 * This middleware captures CALL_HISTORY_METHOD actions to redirect to the
 * provided history object. This will prevent these actions from reaching your
 * reducer or any middleware that comes after this one.
 */
export default function routerMiddleware(history) {
  return () => next => action => {
    if (action.type !== CALL_HISTORY_METHOD) {
      return next(action)
    }

    const { payload: { method, args } } = action
    history[method](...args)
  }
}

Comments

দুর্দান্ত উত্তর সাথী, আপনি আমাকে ব্রেইনলেস স্টাফ করতে বাধা দিয়েছেন 8) কুডস !!

— csomakk

ধারক উদাহরণ জন্য ব্যবহার কি?

— জ্ঞান

আমি এটির পক্ষে নিচ্ছি না, তবে আপনি যদি সার্ভিস লোকেটারের পথে (অ্যাঙ্গুলারের অনুরূপ কিছু) যেতে চান তবে আপনি কিছু ধরণের "ইনজেক্টর / ধারক" সরবরাহকারী যুক্ত করতে পারেন যা আপনি পরিষেবাগুলি সমাধান করেছেন (পূর্বে সেগুলি নিবন্ধীকৃত করেছেন)।

— এডিডুওল্ড

প্রতিক্রিয়া হুক উদ্ধার আসে। হুক্স দিয়ে আপনি কোনও ক্লাস না লিখে পুনরায় ব্যবহারযোগ্য যুক্তি লিখতে পারেন। reactjs.org/docs/…

— রাজা মালিক

Answer 2

সমস্যাটি খুব সহজ হয়ে যায় যখন আপনি বুঝতে পারেন যে একটি কৌণিক পরিষেবাটি কেবল একটি অবজেক্ট যা প্রসঙ্গ-স্বতন্ত্র পদ্ধতিগুলির একটি সেট সরবরাহ করে। এটি কেবল কৌণিক ডিআই মেকানিজম যা এটি আরও জটিল দেখায়। ডিআই দরকারী কারণ এটি আপনার জন্য দৃষ্টান্ত তৈরি এবং বজায় রাখার যত্ন নেয় তবে আপনার এটির সত্যিকার প্রয়োজন নেই।

অক্ষর নামক একটি জনপ্রিয় এজেএক্স লাইব্রেরি বিবেচনা করুন (যা আপনি সম্ভবত শুনেছেন):

import axios from "axios";
axios.post(...);

এটি পরিষেবা হিসাবে আচরণ করে না? এটি কিছু নির্দিষ্ট যুক্তির জন্য দায়ী পদ্ধতিগুলির একটি সেট সরবরাহ করে এবং মূল কোড থেকে স্বতন্ত্র।

আপনার উদাহরণ কেসটি আপনার ইনপুটগুলি বৈধ করার জন্য পদ্ধতির একটি বিচ্ছিন্ন সেট তৈরি করার বিষয়ে ছিল (যেমন পাসওয়ার্ডের শক্তি পরীক্ষা করা)। কেউ কেউ এই পদ্ধতিগুলিকে উপাদানগুলির ভিতরে রাখার পরামর্শ দিয়েছিলেন যা আমার পক্ষে স্পষ্টতই একটি অ্যান্টি-প্যাটার্ন। যদি বৈধকরণে এক্সএইচআর ব্যাকএন্ড কল করা বা প্রসেসিং জড়িত থাকে বা জটিল গণনা করা হয়? আপনি কি মাউস ক্লিক হ্যান্ডলার এবং অন্যান্য UI নির্দিষ্ট স্টাফগুলির সাথে এই যুক্তিটি মিশ্রণ করতে পারবেন? আজেবাজে কথা. ধারক / এইচওসি পদ্ধতির সাথে একই। কেবলমাত্র একটি পদ্ধতি যুক্ত করার জন্য আপনার উপাদানটিকে মোড়ানো যা মানটির একটি অঙ্ক আছে কিনা তা পরীক্ষা করবে? চলে আসো.

আমি কেবল 'ValidationService.js' নামে একটি নতুন ফাইল তৈরি করব এবং নীচে এটি व्यवस्थित করব:

const ValidationService = {
    firstValidationMethod: function(value) {
        //inspect the value
    },

    secondValidationMethod: function(value) {
        //inspect the value
    }
};

export default ValidationService;

তারপরে আপনার উপাদানগুলিতে:

import ValidationService from "./services/ValidationService.js";

...

//inside the component
yourInputChangeHandler(event) {

    if(!ValidationService.firstValidationMethod(event.target.value) {
        //show a validation warning
        return false;
    }
    //proceed
}

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

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

Comments

এই উপায়টি আমি এটিও করতাম। আমি যথেষ্ট অবাক হয়েছি যে এই উত্তরে এর পক্ষে খুব কম ভোট রয়েছে, কারণ এটি মনে হয় এটি সবচেয়ে কম ঘর্ষণ সহ উপায়। যদি আপনার পরিষেবা অন্যান্য পরিষেবার উপর নির্ভর করে, তবে আবার এটি তাদের মডিউলগুলির মাধ্যমে সেই অন্যান্য পরিষেবাগুলি আমদানি করবে। অধিকন্তু মডিউলগুলি সংজ্ঞা অনুসারে, সিঙ্গেলনস, সুতরাং এটি "সাধারণ একক হিসাবে হিসাবে এটি প্রয়োগ করার" জন্য আর কোনও কাজ করার দরকার নেই - আপনি সেই আচরণটি নিখরচায় পাবেন :)

— মিকি পুরি

+1 - আপনি যদি কেবলমাত্র ফাংশন সরবরাহ করে এমন পরিষেবা ব্যবহার করেন তবে উত্তরের উত্তর। তবে , কৌণিকের পরিষেবাটি এমন ক্লাস যা একবারে সংজ্ঞায়িত হয়, এইভাবে কেবল কার্য সম্পাদন করার চেয়ে আরও বেশি বৈশিষ্ট্য সরবরাহ করে। আপনি উদাহরণস্বরূপ পরিষেবা শ্রেণীর প্যারামিটার হিসাবে বস্তুগুলি ক্যাশে করতে পারেন।

— নিনো ফিলিউ

এটি আসল উত্তর হওয়া উচিত, এবং উপরের জটিল প্রতিক্রিয়া নয়

— 211: 21 এ 151737334

এটি "প্রতিক্রিয়াশীল" না বাদে এটি একটি ভাল উত্তর। DOM পরিষেবাটির মধ্যে পরিবর্তনশীল পরিবর্তনের বিষয়ে আপডেট করবে না।

— ডিফাক্টো

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

— menehune23

Answer 3

একাধিক উপাদান জুড়ে ভাগ করার জন্য আমার কিছু ফর্ম্যাটিং লজিকের প্রয়োজন ছিল এবং একটি কৌণিক বিকাশকারীও স্বাভাবিকভাবে কোনও পরিষেবার দিকে ঝুঁকে পড়েছিলেন।

আমি যুক্তিটি একটি পৃথক ফাইলে রেখে ভাগ করেছি

function format(input) {
    //convert input to output
    return output;
}

module.exports = {
    format: format
};

এবং তারপরে এটি একটি মডিউল হিসাবে আমদানি করে

import formatter from '../services/formatter.service';

//then in component

    render() {

        return formatter.format(this.props.data);
    }

Comments

এমনকি প্রতিক্রিয়া নথিতে যেমন বলা হয়েছে এটি একটি ভাল ধারণা: reactjs.org/docs/composition-vs-inheritance.html আপনি যদি উপাদানগুলির মধ্যে নন-ইউআই কার্যকারিতা পুনরায় ব্যবহার করতে চান তবে আমরা এটিকে একটি পৃথক জাভাস্ক্রিপ্ট মডিউলটিতে নিষ্কাশন করার পরামর্শ দিই। উপাদানগুলি এটিকে আমদানি করতে পারে এবং এটি না বাড়িয়েই সেই ফাংশন, অবজেক্ট বা কোনও শ্রেণি ব্যবহার করতে পারে।

— ব্যবহারকারী 3426603

এখানে আসলে বোধগম্যতার একমাত্র উত্তর।

— আর্টেম নোভিকভ

Answer 4

মনে রাখবেন যে প্রতিক্রিয়াটির উদ্দেশ্য হ'ল আরও দুটি জিনিস যা যৌক্তিকভাবে যুক্ত হওয়া উচিত। যদি আপনি একটি জটিল "বৈধতাযুক্ত পাসওয়ার্ড" পদ্ধতি ডিজাইন করেন তবে এটি কোথায় মিলিত হওয়া উচিত?

ভাল আপনি যখন ব্যবহারকারীকে নতুন পাসওয়ার্ড ইনপুট করার প্রয়োজন হয় তখন এটি আপনাকে ব্যবহার করতে হবে। এটি নিবন্ধকরণ স্ক্রিনে থাকতে পারে, "ভুলে যাওয়া পাসওয়ার্ড" স্ক্রিন, প্রশাসক "অন্য ব্যবহারকারীর জন্য পাসওয়ার্ড পুনরায় সেট করুন" স্ক্রিন ইত্যাদি etc.

তবে এই ক্ষেত্রে যে কোনও ক্ষেত্রে এটি সর্বদা কিছু পাঠ্য ইনপুট ক্ষেত্রে আবদ্ধ হতে চলেছে। সুতরাং এটি যেখানে মিলিত করা উচিত।

একটি খুব ছোট প্রতিক্রিয়া উপাদান তৈরি করুন যা কেবলমাত্র একটি ইনপুট ক্ষেত্র এবং সম্পর্কিত বৈধতা যুক্তিযুক্ত। পাসওয়ার্ড ইনপুট থাকতে পারে এমন সমস্ত ফর্মের মধ্যে সেই উপাদানটি ইনপুট করুন।

এটি মূলত যুক্তির জন্য কোনও পরিষেবা / কারখানা থাকার মতো একই ফলাফল, তবে আপনি এটি সরাসরি ইনপুটটিতে সংযুক্ত করছেন। সুতরাং আপনাকে এখন কখনও সেই ফাংশনটি বলার দরকার নেই যেখানে এটির বৈধতা ইনপুটটি কোথায় অনুসন্ধান করা উচিত, কারণ এটি স্থায়ীভাবে এক সাথে আবদ্ধ।

Comments

এটি দম্পতি যুক্তি এবং UI খারাপ অভ্যাস কি। যুক্তিটি পরিবর্তনের জন্য আমাকে উপাদানটি স্পর্শ করতে হবে

— ডেনিস নেরুশ

মৌলিকভাবে যে চ্যালেঞ্জগুলি আপনি করছেন তা অনুগ্রহ করে প্রতিক্রিয়া জানান। এটি প্রচলিত এমভিসি আর্কিটেকচারের সম্পূর্ণ বিপরীতে। এই ভিডিওটি কেন তা ব্যাখ্যা করার জন্য বেশ ভাল কাজ করে (প্রাসঙ্গিক বিভাগটি প্রায় 2 মিনিটের মধ্যে শুরু হয়)।

— জেক রবি

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

— ডাউনহিলসকি

@ গ্রাভিটিপ্ল্যানেক্স আমি প্রতিক্রিয়া ব্যবহার করে উপভোগ করছি। এটি কৌণিক প্যাটার্ন নয়, এটি সফ্টওয়্যার ডিজাইনের ধরণ। আমি অন্যান্য ভাল অংশগুলি থেকে আমার পছন্দ মতো জিনিস ingণ নেওয়ার সময় আমার মন খোলা রাখতে পছন্দ করে।

— ডাউনহিলসকি

@ মিকিপুরি ইএস 6 মডিউলগুলি নির্ভরতা ইনজেকশন এর মতো নয়।

— স্পষ্ট 21

Answer 5

আমি Angular.js অঞ্চল থেকেও এসেছি এবং React.js এর পরিষেবা এবং কারখানাগুলি আরও সহজ।

আপনি আমার মত প্লেইন ফাংশন বা ক্লাস, কলব্যাক স্টাইল এবং ইভেন্ট মবক্স ব্যবহার করতে পারেন :)

// Here we have Service class > dont forget that in JS class is Function
class HttpService {
  constructor() {
    this.data = "Hello data from HttpService";
    this.getData = this.getData.bind(this);
  }

  getData() {
    return this.data;
  }
}


// Making Instance of class > it's object now
const http = new HttpService();


// Here is React Class extended By React
class ReactApp extends React.Component {
  state = {
    data: ""
  };

  componentDidMount() {
    const data = http.getData();

    this.setState({
      data: data
    });
  }

  render() {
    return <div>{this.state.data}</div>;
  }
}

ReactDOM.render(<ReactApp />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

</body>
</html>

এখানে সহজ উদাহরণ:

Comments

React.js হ'ল ইউআই গ্রন্থাগারটি ইউআই উপাদানগুলি রেন্ডার এবং সংগঠিত করতে। যখন এটি পরিষেবাগুলিতে আসে যা আমাদের অতিরিক্ত কার্যকারিতা যুক্ত করতে সহায়তা করতে পারে তখন আমাদের ফাংশন, ক্রিয়ামূলক বস্তু বা শ্রেণীর সংগ্রহ তৈরি করা উচিত। আমি ক্লাসগুলি খুব দরকারী খুঁজে পেয়েছি তবে জানি যে আমি কার্যকরী শৈলীর সাথেও খেলছি যা রেইক.জেসের সুযোগের বাইরে থাকা সুবিধাজনক কার্যকারিতা যুক্ত করার জন্য সহায়ক তৈরি করতেও ব্যবহার করা যেতে পারে।

— জুরজ

সবেমাত্র এটি বাস্তবায়িত হয়েছে। আপনি যেভাবে এটিকে ক্লাস বানিয়েছেন এবং রফতানি করেছেন তা বেশ মার্জিত।

— গ্যাভিনবেলসন

Answer 6

একই পরিস্থিতি: একাধিক কৌণিক প্রকল্প করা এবং প্রতিক্রিয়াতে চলে যাওয়া, ডিআই-এর মাধ্যমে পরিষেবা সরবরাহ করার সহজ উপায় না থাকা অনুপস্থিত অংশের মতো মনে হয় (পরিষেবার বিবরণটি বাদ দিয়ে)।

প্রসঙ্গ এবং ES7 সজ্জকার ব্যবহার করে আমরা কাছে আসতে পারি:

https://jaysoo.ca/2015/06/09/react-contexts-and-dependency-injection/

দেখে মনে হচ্ছে এই ছেলেরা এটিকে আরও একধাপ এগিয়ে নিয়ে গেছে / অন্যদিকে:

http://blog.wolksoftware.com/dependency-injection-in-react-powered-inversifyjs

তবুও মনে হচ্ছে শস্যের বিপরীতে কাজ করা। একটি বড় প্রতিক্রিয়া প্রকল্প গ্রহণের পরে 6 মাসের মধ্যে এই উত্তরে পুনর্বিবেচনা করবে।

সম্পাদনা: 6 মাস পরে আরও কিছু প্রতিক্রিয়া অভিজ্ঞতা নিয়ে। যুক্তির প্রকৃতি বিবেচনা করুন:

1. এটি কি ইউআই-তে বাঁধা (কেবল)? এটি একটি উপাদান (গৃহীত উত্তর) এ সরান।
2. এটি কি রাষ্ট্র পরিচালনার সাথে আবদ্ধ (কেবল)? এটি একটি থাঙ্ক মধ্যে সরান ।
3. দুজনের সাথে বাঁধা? পৃথক ফাইল এ সরান, একটি নির্বাচক মাধ্যমে এবং উপায়ে উপাদান ব্যবহার করুন ।

কিছু পুনরায় ব্যবহারের জন্য এইচওসিগুলির কাছেও পৌঁছায় তবে আমার জন্য উপরোক্ত প্রায় সমস্ত ব্যবহারের ক্ষেত্রে কভার করে। এছাড়াও, উদ্বেগ পৃথক রাখতে এবং রাজ্য ইউআই-কেন্দ্রিক রাখতে হাঁস ব্যবহার করে স্কেলিং রাজ্য পরিচালনা বিবেচনা করুন ।

Comments

এই প্রোগ্রামটিতে আমার মনে হয় হয় দ্বি পুরনো সেবা প্রদান করা একটি সহজ উপায়, ES6 মডিউল সিস্টেম ব্যবহার করে

— মিকি পুরি

@ মিকিপুরি, ES6 মডিউল ডিআই এঙ্গুলার ডিআই এর শ্রেণিবিন্যাসিক প্রকৃতি অন্তর্ভুক্ত করবে না, অর্থাৎ। পিতামাতারা (ডিওমে) তাত্ক্ষণিকভাবে এবং ওভাররাইডিং পরিষেবাগুলি সন্তানের উপাদানগুলিতে সরবরাহ করা হয়। ইমহো ES6 মডিউল ডিআই ডিএনওএম উপাদান এবং এই বিভাগের স্তরবিন্যাসের উপর ভিত্তি করে আলাদা হয়ে বসে নাইনজেক্ট এবং স্ট্রাকচারম্যাপের মতো ব্যাকএন্ড ডিআই সিস্টেমগুলির সাথে তুলনা করে। তবে আমি এটিতে আপনার মতামত শুনতে চাই।

— করলা 14

Answer 7

আমিও কৌণিক থেকে এসেছি এবং প্রতিক্রিয়ার চেষ্টা করছি, এখন পর্যন্ত, প্রস্তাবিত (?) উপায়টি হাই-অর্ডার উপাদান ব্যবহার করছে বলে মনে হচ্ছে :

উপাদানগুলির যুক্তি পুনরায় ব্যবহারের জন্য একটি উচ্চ-অর্ডার উপাদান (এইচওসি) একটি প্রতিক্রিয়াযুক্ত একটি উন্নত প্রযুক্তি। HOCs প্রতিক্রিয়া এপিআই এর অংশ নয়, প্রতি সে। এগুলি এমন একটি প্যাটার্ন যা রিএ্যাক্টের গঠনমূলক প্রকৃতি থেকে উদ্ভূত হয়।

ধরা যাক আপনার আছে inputএবং textareaএকই বৈধতা যুক্তি প্রয়োগ করতে চান:

const Input = (props) => (
  <input type="text"
    style={props.style}
    onChange={props.onChange} />
)
const TextArea = (props) => (
  <textarea rows="3"
    style={props.style}
    onChange={props.onChange} >
  </textarea>
)

তারপরে এমন একটি এইচওসি লিখুন যা মোড়ানো উপাদানকে বৈধতা দেয় এবং শৈলী করে:

function withValidator(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props)

      this.validateAndStyle = this.validateAndStyle.bind(this)
      this.state = {
        style: {}
      }
    }

    validateAndStyle(e) {
      const value = e.target.value
      const valid = value && value.length > 3 // shared logic here
      const style = valid ? {} : { border: '2px solid red' }
      console.log(value, valid)
      this.setState({
        style: style
      })
    }

    render() {
      return <WrappedComponent
        onChange={this.validateAndStyle}
        style={this.state.style}
        {...this.props} />
    }
  }
}

এখন H এইচওসিগুলি একই বৈধকরণের আচরণটি ভাগ করছে:

const InputWithValidator = withValidator(Input)
const TextAreaWithValidator = withValidator(TextArea)

render((
  <div>
    <InputWithValidator />
    <TextAreaWithValidator />
  </div>
), document.getElementById('root'));

আমি একটি সাধারণ ডেমো তৈরি করেছি ।

সম্পাদনা করুন : অন্য একটি ডেমো ক্রিয়াকলাপগুলির অ্যারে পাস করার জন্য প্রপস ব্যবহার করছে যাতে আপনি একাধিক বৈধতা ফাংশনগুলির দ্বারা রচিত লজিকগুলি HOCএর মতো করে ভাগ করতে পারেন:

<InputWithValidator validators={[validator1,validator2]} />
<TextAreaWithValidator validators={[validator1,validator2]} />

সম্পাদনা 2 : প্রতিক্রিয়া 16.8+ একটি নতুন বৈশিষ্ট্য সরবরাহ করে, হুক , যুক্তি ভাগ করার আরও একটি দুর্দান্ত উপায়।

const Input = (props) => {
  const inputValidation = useInputValidation()

  return (
    <input type="text"
    {...inputValidation} />
  )
}

function useInputValidation() {
  const [value, setValue] = useState('')
  const [style, setStyle] = useState({})

  function handleChange(e) {
    const value = e.target.value
    setValue(value)
    const valid = value && value.length > 3 // shared logic here
    const style = valid ? {} : { border: '2px solid red' }
    console.log(value, valid)
    setStyle(style)
  }

  return {
    value,
    style,
    onChange: handleChange
  }
}

https://stackblitz.com/edit/react-shared-validation-logic-using-hook?file=index.js

Comments

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

— ইউসুফ শেরিফ

@ ইউসেফ শরীফ আপনি একাধিক যাচাইকরণ ফাংশন প্রস্তুত করতে পারেন এবং তাদের প্রপস হিসাবে পাস করতে HOCপারেন, অন্য একটি ডেমোটির জন্য আমার সম্পাদনা দেখুন।

— বব

সুতরাং এইচওসি মূলত ধারক উপাদান?

— জ্ঞানী

হ্যাঁ, প্রতিক্রিয়া ডক থেকে: "নোট করুন যে এইচওসি ইনপুট উপাদানটিকে পরিবর্তন করে না, বা এটি এর আচরণের অনুলিপি করার জন্য উত্তরাধিকার ব্যবহার করে না Rather পরিবর্তে, এইচওসি একটি ধারক উপাদানটিতে মোড়ানো দ্বারা মূল উপাদানটি রচনা করে A এইচওসি একটি খাঁটি শূন্য পার্শ্ব প্রতিক্রিয়া সঙ্গে ফাংশন। "

— বব

প্রয়োজনীয়তাটি যুক্তি ইনজেকশনের ছিল, আমি এটি দেখতে পাচ্ছি না কেন এটি করার জন্য আমাদের এইচওসি দরকার। আপনি যদি এইচওসি দিয়ে এটি করতে পারেন তবে এটি অত্যধিক জটিল বলে মনে হচ্ছে। এইচওসি সম্পর্কে আমার বোঝাপড়াটি তখন যখন কিছু অতিরিক্ত রাজ্য থাকে যা যুক্ত করা ও পরিচালনা করা দরকার, অর্থাত্ খাঁটি যুক্তি নয় (যা এখানে ঘটনা ছিল)।

— মিকি পুরী

Answer 8

পরিষেবা কৌণিক সীমাবদ্ধ নয়, এমনকি কৌণিক 2 + এও সীমাবদ্ধ নয় ,

পরিষেবা হ'ল সহায়ক কার্যাদি সংগ্রহ ...

এবং এগুলি তৈরি করার এবং অ্যাপ্লিকেশন জুড়ে তাদের পুনরায় ব্যবহার করার অনেক উপায় রয়েছে ...

1) এগুলি সমস্ত বিচ্ছিন্ন ফাংশন হতে পারে যা নীচের মতই জেএস ফাইল থেকে রফতানি করা হয়:

export const firstFunction = () => {
   return "firstFunction";
}

export const secondFunction = () => {
   return "secondFunction";
}
//etc

2) আমরা কারখানার পদ্ধতি যেমন ফাংশন সংগ্রহের সাথেও ব্যবহার করতে পারি ... ES6 এর সাথে এটি কোনও ফাংশন কনস্ট্রাক্টরের চেয়ে ক্লাস হতে পারে:

class myService {

  constructor() {
    this._data = null;
  }

  setMyService(data) {
    this._data = data;
  }

  getMyService() {
    return this._data;
  }

}

এই ক্ষেত্রে আপনাকে নতুন কী দিয়ে একটি উদাহরণ তৈরি করতে হবে ...

const myServiceInstance = new myService();

এছাড়াও এই ক্ষেত্রে, প্রতিটি উদাহরণের নিজস্ব জীবন রয়েছে, তাই আপনি যদি এটির সাথে ভাগ করে নিতে চান তবে সাবধান হন, সেক্ষেত্রে আপনার কেবলমাত্র প্রয়োজনটি রফতানি করা উচিত ...

3) যদি আপনার ফাংশন এবং ব্যবহার ভাগ না করা হয়, আপনি এমনকি তাদের প্রতিক্রিয়া উপাদানগুলিতে ঠিক যেমন ফাংশন হিসাবে এই ক্ষেত্রে প্রতিক্রিয়া উপাদান রাখতে পারেন ...

class Greeting extends React.Component {
  getName() {
    return "Alireza Dezfoolian";
  }

  render() {
    return <h1>Hello, {this.getName()}</h1>;
  }
}

৪) আপনি যে জিনিসগুলি পরিচালনা করতে পারবেন তা অন্যভাবে, রেডাক্স ব্যবহার করা হতে পারে , এটি আপনার জন্য একটি অস্থায়ী স্টোর, তাই যদি আপনার প্রতিক্রিয়া প্রয়োগে এটি থাকে তবে এটি আপনাকে অনেকগুলি গেটর সেটার ফাংশনগুলির সাথে সহায়তা করতে পারে আপনাকে ব্যবহার করা করতে পারে ... এটি একটি বড় স্টোরের মতো যা আপনার রাজ্যের ট্র্যাক রাখে এবং আপনার উপাদানগুলিতে এটি ভাগ করে নিতে পারে, তাই আমরা পরিষেবাগুলিতে ব্যবহার করি এমন গিটার সেটার স্টাফগুলির জন্য অনেক ব্যথা থেকে মুক্তি পেতে পারি ...

ডিআরওয়াই কোড করা সর্বদা ভাল এবং কোডটি পুনরায় ব্যবহারযোগ্য ও পঠনযোগ্য করার জন্য কী কী ব্যবহার করা উচিত তা পুনরুক্ত না করে আইটেম 4 এ উল্লিখিত রেডাক্স ব্যবহার করে আপনার প্রয়োজনীয়তা হ্রাস করতে পারে রিঅ্যাক্ট অ্যাপে কৌণিক উপায়গুলি অনুসরণ করার চেষ্টা করবেন না Red পরিষেবাগুলি এবং আপনি তাদের আইটেম 1 এর মতো পুনঃব্যবহারযোগ্য সহায়ক ফাংশনগুলির জন্য এগুলি ব্যবহার সীমাবদ্ধ করুন ...

Comments

অবশ্যই, আপনি এটি আমার ব্যক্তিগত পৃষ্ঠায় খুঁজে পেতে পারেন যা আমার প্রোফাইল পৃষ্ঠা থেকে লিঙ্ক ...

— আলিরেজা

"প্রতিক্রিয়াতে কৌণিক উপায়গুলি অনুসরণ করবেন না" .. আহেম কৌণিক Redux ব্যবহার করে প্রচার করে এবং আরএক্সজেএস / স্টোরের মতো পর্যবেক্ষক এবং রেডাক্স-এর মতো রাজ্য পরিচালন ব্যবহার করে স্টোরটিকে প্রেজেন্টাল উপাদানগুলিতে প্রবাহিত করে। .. আপনি অ্যাঙ্গুলারজেএস মানে? কিউজ এটি আর একটি জিনিস

— ইজেস্টে

Answer 9

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

আমি বৈধতা যুক্তি নিজেই বাস্তবায়ন একমত হওয়া উচিত (অবশ্যই) একত্রিত করা উচিত নয়। অতএব আমি এটি একটি পৃথক জেএস মডিউলে রাখব।

এটি হ'ল যুক্তির জন্য যা পৃথক ফাইলে একটি জেএস মডিউল / শ্রেণি ব্যবহার করা উচিত নয় এবং "পরিষেবা" থেকে উপাদানটি ডি-কাপল করার জন্য / আমদানির প্রয়োজন।

এটি স্বাধীনভাবে দুজনের নির্ভরতা ইনজেকশন এবং ইউনিট পরীক্ষার জন্য অনুমতি দেয়।

Answer 10

অথবা আপনি প্রতিক্রিয়া উপাদানগুলিতে শ্রেণি উত্তরাধিকার "HTTP" ইনজেক্ট করতে পারেন

প্রপস অবজেক্টের মাধ্যমে।

1. হালনাগাদ :

   ReactDOM.render(<ReactApp data={app} />, document.getElementById('root'));

2. কেবল প্রতিক্রিয়াশীল উপাদানগুলি প্রতিক্রিয়া জানান:

   class ReactApp extends React.Component {
   
   state = {
   
       data: ''
   
   }
   
       render(){
   
       return (
           <div>
           {this.props.data.getData()}      
           </div>
   
       )
       }
   }

Answer 11

আমি পুনরায় ব্যবহারযোগ্য যুক্তির জন্য সর্বাধিক ব্যবহৃত প্যাটার্ন হ'ল হয় একটি হুক লেখা বা একটি ইউটিস ফাইল তৈরি করা। এটি আপনি কী অর্জন করতে চান তার উপর নির্ভর করে।

hooks/useForm.js

আপনি যদি ফর্ম ডেটা বৈধ করতে চান তবে আমি ইউজফর্ম.জেএস নামে একটি কাস্টম হুক তৈরি করব এবং এটি ফর্ম ডেটা সরবরাহ করব এবং বিনিময়ে এটি আমাকে দুটি জিনিসযুক্ত একটি বস্তু ফিরিয়ে আনবে:

Object: {
    value,
    error,
}

আপনার অগ্রগতির সাথে আপনি অবশ্যই এটি থেকে আরও জিনিস ফিরিয়ে দিতে পারবেন।

utils/URL.js

আর একটি উদাহরণ হ'ল আপনি কোনও ইউআরএল থেকে কিছু তথ্য বের করতে চান তবে আমি এর জন্য একটি ফাংশনযুক্ত একটি ইউটিস ফাইল তৈরি করব এবং যেখানে প্রয়োজন সেখানে এটি আমদানি করব:

 export function getURLParam(p) {
...
}