ডেটা আনার সময় কীভাবে প্রতিক্রিয়া করা হবে রেডাক্স অ্যাপে লোডিং ইন্ডিকেটর? [বন্ধ]

Question

আমি প্রতিক্রিয়া / রেডাক্সে নতুন। আমি API গুলি প্রক্রিয়াকরণের জন্য রেডাক্স অ্যাপ্লিকেশনটিতে একটি আনা এপিআই মিডলওয়্যার ব্যবহার করি। এটি ( রিডেক্স-এপিআই-মিডলওয়্যার )। আমি মনে করি এটি অ্যাসিঙ্ক এপিআই ক্রিয়াকলাপের উত্তম উপায়। তবে আমি এমন কিছু মামলা খুঁজে পেয়েছি যা আমার নিজের দ্বারা সমাধান করা যায় না।

হোমপৃষ্ঠা ( লাইফাইসাইকেল ) যেমনটি বলেছে, একটি আনয়নকারী এফআইএ লাইফেসাইকেল শুরু হয়েছিল একটি CALL_API ক্রিয়া প্রেরণের মাধ্যমে একটি এফএসএ ক্রিয়া প্রেরণে।

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

কিন্তু কিভাবে এই কাজ করতে? পুরো পৃষ্ঠার উপর একটি প্রতিক্রিয়া উপাদান ফ্লো? অন্যান্য ক্রিয়াকলাপ থেকে স্টোর আপডেট হওয়ার সাথে কী ঘটে? মানে তারা রাষ্ট্রের চেয়ে ইভেন্টের মতোই বেশি!

এমনকি আরও খারাপ পরিস্থিতি, আমার যখন রিডেক্স / প্রতিক্রিয়া অ্যাপ্লিকেশনগুলিতে নেটিভ কনফার্ম ডায়ালগ বা সতর্কতা ডায়ালগটি ব্যবহার করতে হবে তখন আমার কী করা উচিত? তাদের কোথায় রাখা উচিত, কর্ম বা হ্রাসকারী?

শুভ কামনা! জবাব চাই

Comments

এটি নীচে প্রশ্নের পুরো উত্তর এবং উত্তরগুলির পরিবর্তন করার সাথে সাথে এই প্রশ্নের শেষ সম্পাদনাটি আবার ঘুরিয়ে দিয়েছে।

— গ্রেগ বি

একটি ঘটনা রাষ্ট্রের পরিবর্তন!

— 应用 架构 模式 大师

কোয়েস্টারের দিকে একবার দেখুন। github.com/orar/questrar

— ওরার

Answer 1

মানে তারা রাষ্ট্রের চেয়ে ইভেন্টের মতোই বেশি!

আমি তাই বলব না। আমি মনে করি লোডিং ইন্ডিকেটরগুলি ইউআইয়ের একটি দুর্দান্ত কেস যা সহজেই রাষ্ট্রের একটি কার্য হিসাবে বর্ণনা করা হয়: এই ক্ষেত্রে, বুলিয়ান ভেরিয়েবলের। যদিও এই উত্তরটি সঠিক, আমি এটির সাথে যেতে কিছু কোড সরবরাহ করতে চাই।

ইন asyncRedux রেপো উদাহরণ , হ্রাসকারক আপডেট একটি ক্ষেত্র নামকisFetching :

case REQUEST_POSTS:
  return Object.assign({}, state, {
    isFetching: true,
    didInvalidate: false
  })
case RECEIVE_POSTS:
  return Object.assign({}, state, {
    isFetching: false,
    didInvalidate: false,
    items: action.posts,
    lastUpdated: action.receivedAt

উপাদানটি connect()স্টেটের রাজ্যে সাবস্ক্রাইব করতে রিঅ্যাক্ট রেডাক্স থেকে ব্যবহার করে এবং ফেরত মানের isFetchingঅংশ হিসাবে ফেরত দেয়mapStateToProps() যাতে এটি সংযুক্ত উপাদানটির প্রপসগুলিতে উপলব্ধ:

function mapStateToProps(state) {
  const { selectedReddit, postsByReddit } = state
  const {
    isFetching,
    lastUpdated,
    items: posts
  } = postsByReddit[selectedReddit] || {
    isFetching: true,
    items: []
  }

  return {
    selectedReddit,
    posts,
    isFetching,
    lastUpdated
  }
}

অবশেষে, কম্পোনেন্ট ব্যবহার isFetchingমধ্যে ঠেকনা render()ফাংশন একটি "লোড হচ্ছে ..." লেবেল (যা বোধগম্যভাবে একটি স্পিনার পরিবর্তে হতে পারে) পেশ করে থাকি:

{isEmpty
  ? (isFetching ? <h2>Loading...</h2> : <h2>Empty.</h2>)
  : <div style={{ opacity: isFetching ? 0.5 : 1 }}>
      <Posts posts={posts} />
    </div>
}

এমনকি আরও খারাপ পরিস্থিতি, আমার যখন রিডেক্স / প্রতিক্রিয়া অ্যাপ্লিকেশনগুলিতে নেটিভ কনফার্ম ডায়ালগ বা সতর্কতা ডায়ালগটি ব্যবহার করতে হবে তখন আমার কী করা উচিত? তাদের কোথায় রাখা উচিত, কর্ম বা হ্রাসকারী?

যে কোনও পার্শ্ব প্রতিক্রিয়া (এবং একটি ডায়ালগ দেখানো অবশ্যই পার্শ্ব প্রতিক্রিয়া) হ্রাসকারীদের অন্তর্ভুক্ত নয়। হ্রাসকারীদেরকে "রাষ্ট্রের নির্মাতারা" হিসাবে বিবেচনা করুন। তারা আসলে জিনিসগুলি "না" করে না।

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

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

Comments

আমার যদি একাধিক ফেচ চলে? তারপরে একটি পরিবর্তনশীল যদিও যথেষ্ট হবে না।

— ফিল্ক

@ ফিল্ক যদি আপনার একাধিক ফেচ থাকে তবে আপনি Promise.allসেগুলি একটি একক প্রতিশ্রুতিতে গ্রুপ করতে পারেন এবং তারপরে সমস্ত ফেচগুলির জন্য একটি একক পদক্ষেপ প্রেরণ করতে পারেন । অথবা আপনাকে isFetchingআপনার রাজ্যে একাধিক পরিবর্তনশীল বজায় রাখতে হবে ।

— সেবাস্তিয়ান লরবার

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

— ড্যান আব্রামভ

মনে রাখবেন যে যদি অনুরোধ ব্যর্থ হয় এবং RECEIVE_POSTSকখনই ট্রিগার না করা হয় তবে লোডিং সাইনটি সেখানেই থাকবে যদি না আপনি কোনও error loadingবার্তা প্রদর্শনের জন্য কিছু সময়সীমা তৈরি করে ।

— জেমস 111

@ টমিস - আমি স্পষ্টভাবে আমার যে সমস্ত রিডেক্স অধ্যবসায় ব্যবহার করছি তা থেকে ফিচার বৈশিষ্ট্যগুলিকে কালো তালিকাভুক্ত করছি।

— duhseekoh

Answer 2

দুর্দান্ত উত্তর ড্যান আব্রামভ! কেবলমাত্র এটি যুক্ত করতে চাই যে আমি আমার অ্যাপ্লিকেশনগুলির একটিতে (বুশিয়ান হিসাবে isFetching রাখা) এবং একসাথে একসাথে সমর্থন করার জন্য এটি একটি পূর্ণসংখ্যার (যা বকেয়া অনুরোধের সংখ্যা হিসাবে পড়া শেষ করে) তৈরি করে শেষ করেছি multiple অনুরোধ.

বুলিয়ান সহ:

অনুরোধ 1 শুরু -> স্পিনার চালু -> অনুরোধ 2 শুরু -> অনুরোধ 1 টি শেষ -> স্পিনার বন্ধ -> অনুরোধ 2 টি শেষ

পূর্ণসংখ্যা সহ:

অনুরোধ 1 শুরু -> স্পিনার চালু -> অনুরোধ 2 শুরু -> অনুরোধ 1 শেষ -> অনুরোধ 2 টি শেষ -> স্পিনার বন্ধ

case REQUEST_POSTS:
  return Object.assign({}, state, {
    isFetching: state.isFetching + 1,
    didInvalidate: false
  })
case RECEIVE_POSTS:
  return Object.assign({}, state, {
    isFetching: state.isFetching - 1,
    didInvalidate: false,
    items: action.posts,
    lastUpdated: action.receivedAt

Comments

এটা যুক্তিযুক্ত। তবে বেশিরভাগ ক্ষেত্রে আপনি পতাকা ছাড়াও কিছু তথ্য সংগ্রহ করতে চান । এই মুহুর্তে আপনার isFetchingপতাকা সহ একাধিক বস্তু থাকতে হবে । আপনি যে উদাহরণটি আমি সংযুক্ত করেছেন তা যদি আপনি নিবিড়ভাবে লক্ষ্য করেন তবে দেখতে পাবেন যে এর সাথে একটিও নয় isFetchedবরং অনেকগুলি রয়েছে: প্রতি সাবরেডিটেটে একটি (যা সেই উদাহরণটিতে আনা হচ্ছে)।

— ড্যান আব্রামভ

উহু. হ্যাঁ আমি এটা খেয়াল করিনি। তবে আমার ক্ষেত্রে আমার একটি বৈশ্বিক হল রাজ্যে ফ্যাচিং এন্ট্রি এবং ক্যাশে এন্ট্রি যেখানে আনার তথ্য সংরক্ষণ করা আছে এবং আমার উদ্দেশ্যে আমি কেবল সত্যই যত্নশীল যে কিছু নেটওয়ার্ক ক্রিয়াকলাপ ঘটছে, তাতে আসলে কী হয় তা নয়

— নুনো ক্যাম্পোস

হাঁ! আপনি ইউআইতে এক বা একাধিক স্থানে আনার সূচকটি প্রদর্শন করতে চান কিনা তা নির্ভর করে। বস্তুত আপনি দুটি একত্রিত এবং থাকতে পারে উভয় একটি বিশ্বব্যাপী fetchCounterস্ক্রিন এবং ততোধিক নির্দিষ্ট উপরের কিছু প্রগতি দণ্ড জন্য isFetchingতালিকা এবং পৃষ্ঠাগুলির জন্য ফ্ল্যাগ।

— ড্যান আব্রামভ

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

— user989988

Answer 3

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

আমার সাথে এটি ঘটেছিল যে আমি একটি নির্দিষ্ট সত্তার জন্য বিশদ সংগ্রহ করতে চেয়েছিলাম যা পৃষ্ঠাগুলি বিন্যাসে ফিট করে না। আমি একটি রাষ্ট্রের প্রতিনিধিত্ব করতে চেয়েছিলাম যদি সার্ভার থেকে বিশদটি আনা হয় তবে আমি কেবল এটির জন্য একটি হ্রাসকারক চাই না।

এটি সমাধান করার জন্য আমি আর একটি জেনেরিক হ্রাসকারী যুক্ত করেছি fetching। এটা তোলে পত্রাঙ্কন হ্রাসকারক একটি অনুরূপ ফ্যাশন কাজ করে এবং এটা দায়িত্ব শুধু হয় ঘড়ি ক্রিয়াকলাপের একটি সেট এবং জোড়া সাথে নতুন রাষ্ট্র উৎপন্ন [entity, isFetching]। এটি যে connectকোনও উপাদানগুলিতে রিডুসারকে অনুমতি দেয় এবং এটি অ্যাপ্লিকেশনটি কেবলমাত্র সংগ্রহের জন্য নয় একটি নির্দিষ্ট সত্তার জন্য ডেটা আনছে কিনা তা জানতে দেয়।

Comments

উত্তর করার জন্য ধন্যবাদ! স্বতন্ত্র আইটেমগুলির লোডিং পরিচালনা এবং তাদের স্থিতি খুব কমই আলোচিত হয়!

— গিলাদ পেলেগ

যখন আমার কাছে এমন একটি উপাদান রয়েছে যা অন্যের ক্রিয়াকলাপের উপর নির্ভর করে দ্রুত এবং নোংরা উপায়টি আপনার মানচিত্রে রয়েছে স্টেট টপ্রপসগুলি তাদের এইভাবে একত্রিত করে: #Fetching: posts.isFetching || comments.isFetching - যখন কোনও একটি আপডেট করা হচ্ছে তখন আপনি উভয় উপাদানগুলির জন্য ব্যবহারকারীর ইন্টারঅ্যাকশনকে ব্লক করতে পারেন।

— ফিলিপ মারফি

Answer 4

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

চারটি বড় টুকরো রয়েছে:

• কারখানার প্যাটার্ন: এটি আপনাকে সেই একই ক্রিয়াকলাপটি দ্রুত সেট করার জন্য কল করতে দেয় যা আপনার উপাদানগুলির জন্য "লোডিং" বলতে বোঝায় এবং কোন ক্রিয়া প্রেরণ করবে। (এটি ধরে নিচ্ছে যে উপাদানটি অপেক্ষা করছে তার ক্রিয়াকলাপ শুরু করার জন্য দায়ী))const loaderWrapper = loaderFactory(actionsList, monitoredStates);
• মোড়ক: ফ্যাক্টরিটি যে উপাদানটি তৈরি করে তা হ'ল উচ্চতর অর্ডার উপাদান "(যেমন connect()রেডাক্সের ক্ষেত্রে কী ফিরিয়ে দেয়), যাতে আপনি এটি কেবল আপনার বিদ্যমান স্টাফগুলিতে বল্টু করতে পারেন।const LoadingChild = loaderWrapper(ChildComponent);
• অ্যাকশন / রিডুসার ইন্টারঅ্যাকশন: এটির একটি রিডুসার প্লাগড রয়েছে কিনা তা যাচাই করে তা যাচাই করে তা পরীক্ষা করে। মোড়কের দ্বারা প্রেরিত ক্রিয়াগুলি সম্পর্কিত কীওয়ার্ডগুলি উত্পাদিত করবে বলে আশা করা হচ্ছে (যেমন রিডুএক্স-এপি-মিডিলওয়্যার প্রেরণ ACTION_SUCCESSএবং ACTION_REQUESTউদাহরণস্বরূপ)। (আপনি অন্য কোথাও ক্রিয়াকলাপ প্রেরণ করতে পারেন এবং অবশ্যই আপনি চাইলে কেবল মোড়ক থেকে নিরীক্ষণ করতে পারেন))
• থ্রোবার: আপনার উপাদানটি নির্ভর করে এমন ডেটা প্রস্তুত হওয়ার সময় আপনি যে উপাদানটি উপস্থিত হতে চান তা প্রস্তুত নয়। আমি সেখানে কিছুটা ডিভ যোগ করেছি যাতে আপনি এটি পরীক্ষা না করেই পরীক্ষা করে দেখতে পারেন।

মডিউলটি নিজেই রেডেক্স-এপি-মিডলওয়্যার থেকে স্বতন্ত্র, তবে এটিই আমি এটি দিয়ে ব্যবহার করি, তাই এখানে README থেকে কিছু নমুনা কোড দেওয়া হয়েছে:

লোডারের মোড়কযুক্ত একটি উপাদান:

import React from 'react';
import { myAsyncAction } from '../actions';
import loaderFactory from 'react-loader-factory';
import ChildComponent from './ChildComponent';

const actionsList = [myAsyncAction()];
const monitoredStates = ['ASYNC_REQUEST'];
const loaderWrapper = loaderFactory(actionsList, monitoredStates);

const LoadingChild = loaderWrapper(ChildComponent);

const containingComponent = props => {
  // Do whatever you need to do with your usual containing component 

  const childProps = { someProps: 'props' };

  return <LoadingChild { ...childProps } />;
}

লোডারকে নিরীক্ষণের জন্য একটি হ্রাসকারী (যদিও আপনি এটি চাইলে আলাদাভাবে তারটি ব্যবহার করতে পারেন):

export function activeRequests(state = [], action) {
  const newState = state.slice();

  // regex that tests for an API action string ending with _REQUEST 
  const reqReg = new RegExp(/^[A-Z]+\_REQUEST$/g);
  // regex that tests for a API action string ending with _SUCCESS 
  const sucReg = new RegExp(/^[A-Z]+\_SUCCESS$/g);

  // if a _REQUEST comes in, add it to the activeRequests list 
  if (reqReg.test(action.type)) {
    newState.push(action.type);
  }

  // if a _SUCCESS comes in, delete its corresponding _REQUEST 
  if (sucReg.test(action.type)) {
    const reqType = action.type.split('_')[0].concat('_REQUEST');
    const deleteInd = state.indexOf(reqType);

    if (deleteInd !== -1) {
      newState.splice(deleteInd, 1);
    }
  }

  return newState;
}

আমি নিকট ভবিষ্যতে আশা করি আমি মডিউলটিতে সময়সীমা এবং ত্রুটির মতো জিনিসগুলি যুক্ত করব, তবে প্যাটার্নটি খুব আলাদা হবে না।

---

আপনার প্রশ্নের সংক্ষিপ্ত উত্তর হ'ল:

1. রেন্ডারিং কোডে রেন্ডারিং টাই করুন - যে উপাদানটি আমি উপরে দেখিয়েছি তার মতো ডেটা রেন্ডার করতে প্রয়োজন উপাদানটির চারপাশে একটি মোড়ক ব্যবহার করুন।
2. এমন একটি হ্রাসকারী যুক্ত করুন যা অ্যাপ্লিকেশনটির চারপাশের অনুরোধগুলির স্থিতি তৈরি করে যা আপনি সহজে হজম করতে পারেন so তাই আপনাকে কী ঘটছে সে সম্পর্কে খুব বেশি চিন্তা করতে হবে না।
3. ইভেন্টগুলি এবং রাজ্য আসলে আলাদা নয়।
4. আপনার বাকি অনুভূতি আমার কাছে সঠিক বলে মনে হচ্ছে।

Answer 5

আমি কি কেবল একজনই ভাবছি যে লোডিং সূচকগুলি কোনও রেডাক্স স্টোরের অন্তর্ভুক্ত নয়? আমি বলতে চাইছি, আমি মনে করি না যে এটি কোনও অ্যাপ্লিকেশনের রাজ্যের অংশ se

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

লোডিং সার্ভিসের ব্যবহারকারীরা কেবল যে ইভেন্টগুলি শুনতে চান তাদের সাবস্ক্রাইব করে ..

আমার রেডাক্স অ্যাকশন স্রষ্টা যখনই জিনিসগুলি পরিবর্তনের প্রয়োজন হয় তখন লোডিং সার্ভিসটিকে কল করে। ইউএক্স উপাদানগুলি উন্মুক্ত পর্যবেক্ষণে সাবস্ক্রাইব করে ...

Comments

এ কারণেই আমি স্টোরের ধারণাটি পছন্দ করি, যেখানে সমস্ত ক্রিয়াকলাপটি (এনজিআরএক্স এবং রিডেক্স-লজিক) পোল করা যায়, পরিষেবাটি কার্যকরী নয়, রিডেক্স-লজিক - ক্রিয়ামূলক। ভাল পঠন

— srghma

হাই, এক বছরেরও বেশি সময় পরে আবার চেক করে বলছি যে, আমি খুব ভুল করেছিলাম। অবশ্যই ইউএক্স রাজ্য অ্যাপ্লিকেশন রাজ্যের অন্তর্ভুক্ত। আমি কত বোকা হতে পারি?

— স্পোক করুন

Answer 6

connect()প্রতিক্রিয়া রেডাক্স বা নিম্ন-স্তরের store.subscribe()পদ্ধতিটি ব্যবহার করে আপনি আপনার স্টোরগুলিতে পরিবর্তন শ্রোতাদের যোগ করতে পারেন । আপনার স্টোরটিতে লোডিং সূচক থাকা উচিত, যা স্টোর পরিবর্তন হ্যান্ডলারটি তখন উপাদানটির অবস্থাটি পরীক্ষা করে আপডেট করতে পারে। রাষ্ট্রের উপর ভিত্তি করে উপাদানটি প্রয়োজনে প্রিলোডারকে রেন্ডার করে।

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

Comments

সতর্কতা / নিশ্চিতকরণ কোড সম্পর্কে, তাদের কোথায় রাখা উচিত, ক্রিয়া বা হ্রাসকারী?

— 应用 架构 模式 大师

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

— মিলো রায়েš

কিছু ইউআই উপাদান স্ট্যাটাসের পরিবর্তে কোনও ইভেন্ট (স্ট্যাটাস পরিবর্তনের ঘটনা) ট্রিগার করে কাজ করে। যেমন একটি অ্যানিমেশন, প্রিলোডার দেখানো / লুকিয়ে রাখা। আপনি কিভাবে তাদের প্রক্রিয়া করবেন?

— 0 应用 架构 模式 大师

আপনি যদি আপনার প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে একটি অ-প্রতিক্রিয়া উপাদান ব্যবহার করতে চান তবে সাধারণত ব্যবহৃত সমাধানটি একটি মোড়কের রিঅ্যাক্ট উপাদান তৈরি করা হয় তবে নন-রিঅ্যাক্ট উপাদানটির কোনও উদাহরণ শুরু করতে, আপডেট করতে এবং ধ্বংস করতে তার জীবনচক্র পদ্ধতিগুলি ব্যবহার করুন। এ জাতীয় বেশিরভাগ উপাদান ডিওএম-তে স্থানধারক উপাদানগুলি আরম্ভ করতে ব্যবহার করে এবং আপনি তাদের প্রতিক্রিয়া উপাদানটির রেন্ডার পদ্ধতিতে রেন্ডার করতে পারেন। আপনি জীবনচক্র পদ্ধতি সম্পর্কে এখানে আরও পড়তে পারেন: facebook.github.io/react/docs/comp

— घटक-specs.html

আমার একটি কেস রয়েছে: ডানদিকের শীর্ষে কোণে একটি বিজ্ঞপ্তি অঞ্চল, যার মধ্যে একটি বিজ্ঞপ্তি বার্তা রয়েছে, প্রতিটি বার্তা প্রদর্শিত হয় এবং 5 সেকেন্ড পরে অদৃশ্য হয়ে যায়। হোস্ট নেটিভ অ্যাপ্লিকেশন সরবরাহ করে এই উপাদানটি ওয়েবভিউয়ের বাইরে। এটি যেমন কিছু জেএস ইন্টারফেস সরবরাহ করে addNofication(message)। অন্য কেস হ'ল প্রিলোডারগুলি যা হোস্ট নেটিভ অ্যাপ্লিকেশন দ্বারা সরবরাহ করা হয় এবং এর জাভাস্ক্রিপ্ট এপিআই দ্বারা ট্রিগার করা হয়েছে। আমি সেই এপিআই-র componentDidUpdateজন্য একটি প্রতিক্রিয়া উপাদানগুলির একটি মোড়ক যুক্ত করি । আমি কীভাবে এই উপাদানগুলির প্রপস বা রাজ্য ডিজাইন করব?

— 应用 架构 模式 大师

Answer 7

আমাদের অ্যাপ্লিকেশনটিতে আমাদের তিন ধরণের বিজ্ঞপ্তি রয়েছে, এগুলির সমস্তই দিক হিসাবে ডিজাইন করা হয়েছে:

1. সূচক লোড হচ্ছে (প্রপ উপর ভিত্তি করে মডেল বা নন-মডেল)
2. ত্রুটি পপআপ (মডেল)
3. বিজ্ঞপ্তি স্নাকবার (নন-মডেল, স্ব সমাপ্তি)

এগুলির তিনটিই আমাদের অ্যাপের (মেইন) শীর্ষ স্তরে এবং নীচের কোড স্নিপেটে প্রদর্শিত রেডাক্সের মাধ্যমে তারযুক্ত। এই প্রপসগুলি তাদের সম্পর্কিত দিকগুলির নিয়ন্ত্রণ প্রদর্শন করে।

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

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

@connect(
// map state to props
state => ({
    isFetching      :state.main.get('isFetching'),   // ProgressIndicator
    notification    :state.main.get('notification'), // Snackbar
    error           :state.main.get('error')         // ErrorPopup
}),
// mapDispatchToProps
(dispatch) => { return {
    actions: bindActionCreators(actionCreators, dispatch)
}}

) রফতানি ডিফল্ট ক্লাস মেইন প্রবণতা বাড়ায় omp উপাদান {

Comments

আমি কোনও লোডার / বিজ্ঞপ্তিগুলি দেখিয়ে একই ধরণের সেটআপে কাজ করছি। আমি সমস্যায় পড়ছি; আপনি কীভাবে এই কাজগুলি সম্পাদন করেন তার একটি উদাহরণ বা উদাহরণ থাকবে?

— আয়মান

Answer 8

আমি url সংরক্ষণ করছি যেমন ::

isFetching: {
    /api/posts/1: true,
    api/posts/3: false,
    api/search?q=322: true,
}

এবং তারপরে আমার একটি মুখস্থ নির্বাচক আছে (পুনর্নির্মাণের মাধ্যমে)।

const getIsFetching = createSelector(
    state => state.isFetching,
    items => items => Object.keys(items).filter(item => items[item] === true).length > 0 ? true : false
);

পোষ্টের ক্ষেত্রে ইউআরএলটিকে অনন্য করতে, আমি কোয়েরি হিসাবে কিছু ভেরিয়েবল পাস করি।

এবং যেখানে আমি একটি সূচক দেখাতে চাই, আমি কেবল getFetchCount ভেরিয়েবলটি ব্যবহার করি

Comments

আপনি প্রতিস্থাপন করতে পারেন Object.keys(items).filter(item => items[item] === true).length > 0 ? true : falseদ্বারা Object.keys(items).every(item => items[item])উপায় দ্বারা।

— আলেকজান্দ্রে আনিক

আমি মনে করি এর someপরিবর্তে আপনি বোঝাতে চেয়েছিলেন everyতবে হ্যাঁ, প্রথম প্রস্তাবিত সমাধানে খুব বেশি তুলনা করার দরকার নেই। Object.entries(items).some(([url, fetching]) => fetching);

— রাফায়েল পোরাস লুসেনা