রিঅ্যাক্টজেএস দুটি উপাদান যোগাযোগ করছে

Question

আমি সবেমাত্র রিএ্যাকটিজেএস দিয়ে শুরু করেছি এবং আমার যে সমস্যা রয়েছে তাতে কিছুটা আটকে আছি।

আমার অ্যাপ্লিকেশনটি মূলত ফিল্টার এবং লেআউট পরিবর্তন করার জন্য একটি বোতাম সহ একটি তালিকা। মুহূর্তে আমি তিনটি উপাদান ব্যবহার করছি: <list />,< Filters /> এবং <TopBar />এখন স্পষ্টত যখন আমি সেটিংস পরিবর্তন মধ্যে < Filters />আমি কিছু পদ্ধতি আরম্ভ করতে চান <list />আমার দৃষ্টিতে আপডেট করার জন্য।

আমি কীভাবে এই 3 টি উপাদান একে অপরের সাথে ইন্টারঅ্যাক্ট করতে পারি, বা আমার কী এমন কিছু গ্লোবাল ডেটা মডেল দরকার যেখানে আমি কেবল পরিবর্তন করতে পারি?

Comments

তিনটি ভাইবোনের উপাদান নাকি একটির অন্যের মধ্যে রয়েছে?

— পিগ্রিন 2

তারা তিনটি উপাদানই, আমি ইতিমধ্যে আমার অ্যাপ্লিকেশনটি পুনরায় সাজিয়েছি যাতে এখন তাদের সবার একই পিতা-মাতাকে থাকতে পারে যিনি তাদের ডেটা সরবরাহ করতে পারেন।

— woutr_be

আপনি এখানে ফ্লাক্স বা পাবস্যাব প্যাটার্ন ব্যবহার করতে পারেন। প্রতিক্রিয়া দস্তাবেজের ডক্সের উপর ভিত্তি করে তারা কিছুটা দ্ব্যর্থক বাক্য ছেড়ে দেয়: "পিতা-সন্তানের সম্পর্ক নেই এমন দুটি উপাদানগুলির মধ্যে যোগাযোগের জন্য, আপনি নিজের বৈশ্বিক ইভেন্ট সিস্টেম সেট আপ করতে পারেন।" facebook.github.io/react/tips/…

— বিন্জবয়

@BingeBoy সঠিক সর্দি reactjs অ্যাপ্লিকেশান লেখার দুর্দান্ত উপায়, যে সমস্যা হ্যান্ডেল করতে পারেন, তথ্য প্রবাহ অনেক উপাদান দ্বারা ডেটা ভাগ করছে।

— অঙ্কিত পটিয়াল

আপনি যদি প্রবাহ বা রেডাক্সে

— কম্পোনেন্ট-

Answer 1

আপনি কীভাবে এই উপাদানগুলি সাজানোর পরিকল্পনা করছেন তার উপর সেরা পন্থা নির্ভর করবে। এই মুহুর্তে মাথায় আসা কয়েকটি উদাহরণের পরিস্থিতি:

1. <Filters /> একটি শিশু উপাদান <List />
2. উভয়ই <Filters />এবং <List />পিতামাতার উপাদানগুলির সন্তান
3. <Filters />এবং <List />সম্পূর্ণ পৃথক রুট উপাদানগুলিতে বাস করুন।

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

দৃশ্যপট 1

আপনি থেকে কোনও হ্যান্ডলার পাস করতে <List />পারেন <Filters />, যা onChangeবর্তমান ইভেন্টের সাথে তালিকাকে ফিল্টার করার জন্য ইভেন্টে ডাকা যেতে পারে ।

# 1 for এর জন্য জেএসফিডাল →

/** @jsx React.DOM */

var Filters = React.createClass({
  handleFilterChange: function() {
    var value = this.refs.filterInput.getDOMNode().value;
    this.props.updateFilter(value);
  },
  render: function() {
    return <input type="text" ref="filterInput" onChange={this.handleFilterChange} placeholder="Filter" />;
  }
});

var List = React.createClass({
  getInitialState: function() {
    return {
      listItems: ['Chicago', 'New York', 'Tokyo', 'London', 'San Francisco', 'Amsterdam', 'Hong Kong'],
      nameFilter: ''
    };
  },
  handleFilterUpdate: function(filterValue) {
    this.setState({
      nameFilter: filterValue
    });
  },
  render: function() {
    var displayedItems = this.state.listItems.filter(function(item) {
      var match = item.toLowerCase().indexOf(this.state.nameFilter.toLowerCase());
      return (match !== -1);
    }.bind(this));

    var content;
    if (displayedItems.length > 0) {
      var items = displayedItems.map(function(item) {
        return <li>{item}</li>;
      });
      content = <ul>{items}</ul>
    } else {
      content = <p>No items matching this filter</p>;
    }

    return (
      <div>
        <Filters updateFilter={this.handleFilterUpdate} />
        <h4>Results</h4>
        {content}
      </div>
    );
  }
});

React.renderComponent(<List />, document.body);

---

দৃশ্য # 2

পরিস্থিতি # 1 এর মতো, তবে প্যারেন্ট উপাদানটি হ্যান্ডলারের ক্রিয়াকলাপটি কেটে নেবে <Filters />এবং ফিল্টার তালিকাটি এতে পাস করবে <List />। আমি এই পদ্ধতি ভাল যেহেতু এটি বিযুক্ত করে পছন্দ <List />থেকে <Filters />।

# 2 for এর জন্য জেএসফিডাল →

/** @jsx React.DOM */

var Filters = React.createClass({
  handleFilterChange: function() {
    var value = this.refs.filterInput.getDOMNode().value;
    this.props.updateFilter(value);
  },
  render: function() {
    return <input type="text" ref="filterInput" onChange={this.handleFilterChange} placeholder="Filter" />;
  }
});

var List = React.createClass({
  render: function() {
    var content;
    if (this.props.items.length > 0) {
      var items = this.props.items.map(function(item) {
        return <li>{item}</li>;
      });
      content = <ul>{items}</ul>
    } else {
      content = <p>No items matching this filter</p>;
    }
    return (
      <div className="results">
        <h4>Results</h4>
        {content}
      </div>
    );
  }
});

var ListContainer = React.createClass({
  getInitialState: function() {
    return {
      listItems: ['Chicago', 'New York', 'Tokyo', 'London', 'San Francisco', 'Amsterdam', 'Hong Kong'],
      nameFilter: ''
    };
  },
  handleFilterUpdate: function(filterValue) {
    this.setState({
      nameFilter: filterValue
    });
  },
  render: function() {
    var displayedItems = this.state.listItems.filter(function(item) {
      var match = item.toLowerCase().indexOf(this.state.nameFilter.toLowerCase());
      return (match !== -1);
    }.bind(this));

    return (
      <div>
        <Filters updateFilter={this.handleFilterUpdate} />
        <List items={displayedItems} />
      </div>
    );
  }
});

React.renderComponent(<ListContainer />, document.body);

---

দৃশ্য # 3

উপাদানগুলি যখন কোনও ধরণের পিতা-মাতার সম্পর্কের মধ্যে যোগাযোগ করতে পারে না, ডকুমেন্টেশনটি একটি বিশ্বব্যাপী ইভেন্ট সিস্টেম স্থাপনের প্রস্তাব দেয় ।

Comments

যেমন একটি ফাংশন: # 2 চমৎকার ব্যাপার হল তারা শুধুমাত্র একটি পিতা বা মাতা যারা প্রতিটি উপাদানের জন্য একটি ঠেকনা পাসের উপর নির্ভর হয় updateFilterথেকে <Filters />এবং একটি অ্যারের itemsকরতে <List />। আপনি বাচ্চাদের উপাদানগুলি অন্য বাবা-মায়ের একসাথে বা এককভাবে বিভিন্ন আচরণের সাথে ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি যদি একটি গতিশীল তালিকা প্রদর্শন করতে চান তবে ফিল্টারিংয়ের প্রয়োজন হয় না।

— মাইকেল LaCroix

@woutr_be এটি আপনার প্রয়োজনের সাথে খাপ খায় কিনা তা নিশ্চিত নন তবে যখন একইরকম পরিস্থিতিতে আবার আমরা শিশু এবং পিতামাতার উপাদানগুলির মধ্যে বাছাইয়ের জন্য নিম্নলিখিত দুটি ফাংশন ব্যবহার করেছি: - শুনুন: ফাংশন (ইভেন্টের নাম, ইভেন্টক্যালব্যাক) {$ ( উইন্ডো.ডোকামেন্ট) .বাইন্ড (ইভেন্টনাম, ইভেন্টক্যালব্যাক);} ট্রিগার ইভেন্ট: ফাংশন (ইভেন্টনাম, প্যারাম) {e .vent.trigger (ইভেন্টনাম, প্যারাম);} আশা করি এটি সাহায্য করবে! (দুঃখিত এটি আরও ভাল ফর্ম্যাট করতে পারে না)

— 5122014009

3 দৃশ্যের জন্য, কোনও প্রস্তাবিত পদ্ধতি রয়েছে? কাস্টম সিন্থেটিক ইভেন্ট উত্পন্ন করে এর উপর কোনও ডক্স বা উদাহরণ? মূল ডক্সে আমি কিছু পাইনি anything

— 11'14 এ 14

দৃশ্যপট # 2 তোলে ধারণা অনেক ... যতক্ষণ না আপনি নকশা বিপন্ন (যদি শুধুমাত্র লেআউট) আছে - তারপর আপনি একটি EventHub / PubSub প্রয়োজনীয়তা উপলব্ধি।

— কোডি

দৃশ্য # 3 লিঙ্কটি মারা গেছে এবং এখন কোনও সম্পর্কযুক্ত প্রতিক্রিয়া ডক্স পৃষ্ঠাতে পুনঃনির্দেশ।

— বোরপোরার

Answer 2

উপাদানগুলি যোগাযোগ করার একাধিক উপায় রয়েছে। কিছু আপনার ব্যবহারের জন্য উপযুক্ত হতে পারে। আমি জেনে দরকারী বলে মনে করেছি তার একটি তালিকা এখানে।

প্রতিক্রিয়া

পিতামাতার / শিশু সরাসরি যোগাযোগ

const Child = ({fromChildToParentCallback}) => (
  <div onClick={() => fromChildToParentCallback(42)}>
    Click me
  </div>
);

class Parent extends React.Component {
  receiveChildValue = (value) => {
    console.log("Parent received value from child: " + value); // value is 42
  };
  render() {
    return (
      <Child fromChildToParentCallback={this.receiveChildValue}/>
    )
  }
}

এখানে সন্তানের উপাদানটি একটি মান সহ পিতামাতার প্রদত্ত কলব্যাককে কল করবে এবং পিতামাতারা পিতামাতার মধ্যে বাচ্চাদের দ্বারা সরবরাহিত মানটি পেতে সক্ষম হবেন।

আপনি আপনার অ্যাপ্লিকেশন এর একটি বৈশিষ্ট্য / পৃষ্ঠা তৈরী করেছি, এটা callbacks / রাজ্য (নামেও পরিচালনার একটি একক পিতা বা মাতা না থাকাই ভাল ছিল containerবা smart component), এবং সব সন্তানের আড়ম্বরহীন হতে, শুধুমাত্র পিতা বা মাতা জিনিস প্রতিবেদন। এইভাবে আপনি যে কোনও সন্তানের প্রয়োজনের সাথে পিতামাতার অবস্থা সহজেই "ভাগ" করতে পারেন।

---

প্রসঙ্গ

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

এখন অবধি, প্রসঙ্গটি একটি পরীক্ষামূলক বৈশিষ্ট্য ছিল, তবে একটি নতুন এপিআই উপলব্ধ 16.3 এর প্রতিক্রিয়াতে।

const AppContext = React.createContext(null)

class App extends React.Component {
  render() {
    return (
      <AppContext.Provider value={{language: "en",userId: 42}}>
        <div>
          ...
          <SomeDeeplyNestedComponent/>
          ...
        </div>
      </AppContext.Provider>
    )
  }
};

const SomeDeeplyNestedComponent = () => (
  <AppContext.Consumer>
    {({language}) => <div>App language is currently {language}</div>}
  </AppContext.Consumer>
);

গ্রাহক রেন্ডার প্রপ / শিশুদের ফাংশন প্যাটার্নটি ব্যবহার করছেন

এই ব্লগ পোস্ট চেক করুনআরও তথ্যের জন্য করুন।

16.3 প্রতিক্রিয়া দেওয়ার আগে, আমি প্রতিক্রিয়া-সম্প্রচার ব্যবহার করার পরামর্শ দেব যা বেশ অনুরূপ এপিআই দেয়, এবং প্রাক্তন প্রসঙ্গের এপিআই ব্যবহার করে।

---

পোর্টাল

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

এই ক্ষেত্রে আপনি একটি "পোর্টাল" ব্যবহার করতে পারেন। পোর্টাল ব্যবহার করে বিভিন্ন প্রতিক্রিয়া পাঠাগার রয়েছে , সাধারণত মডেলের জন্য ব্যবহৃত হয় , পপআপ, টুলটিপ্সে ...

নিম্নোক্ত বিবেচনা কর:

<div className="a">
    a content
    <Portal target="body">
        <div className="b">
            b content
        </div>
    </Portal>
</div>

ভিতরে রেন্ডার করা হলে নিম্নলিখিত ডোম তৈরি করতে পারে reactAppContainer:

<body>
    <div id="reactAppContainer">
        <div className="a">
             a content
        </div>
    </div>
    <div className="b">
         b content
    </div>
</body>

আরও বিশদ এখানে

---

স্লট মেশিন

আপনি কোথাও একটি স্লট সংজ্ঞায়িত করেছেন, এবং তারপরে আপনি আপনার রেন্ডার গাছের অন্য জায়গা থেকে স্লটটি পূরণ করুন।

import { Slot, Fill } from 'react-slot-fill';

const Toolbar = (props) =>
  <div>
    <Slot name="ToolbarContent" />
  </div>

export default Toolbar;

export const FillToolbar = ({children}) =>
  <Fill name="ToolbarContent">
    {children}
  </Fill>

এটি আপনার পোর্টালগুলির সাথে কিছুটা সমান যেমন আপনি যে সংজ্ঞায়িত করেছেন সেই স্লটে রেন্ডার করা হবে, যখন পোর্টালগুলি সাধারণত একটি নতুন ডোম নোড রেন্ডার করে (প্রায়শই ডকুমেন্ট.বৌদের একটি শিশু) re

চেক প্রতিক্রিয়া-স্লট পূরণ গ্রন্থাগার

---

ইভেন্ট বাস

প্রতিক্রিয়া নথি হিসাবে বলা হয়েছে :

পিতা-সন্তানের সম্পর্ক নেই এমন দুটি উপাদানগুলির মধ্যে যোগাযোগের জন্য, আপনি নিজের বৈশ্বিক ইভেন্ট সিস্টেম সেট আপ করতে পারেন। কম্পোনেন্টডিডমাউন্ট () এর ইভেন্টগুলিতে সাবস্ক্রাইব করুন, কম্পোনেন্ট উইলউনমাউন্ট () এ সাবস্ক্রাইব করুন, এবং আপনি যখন কোনও ইভেন্ট পাবেন তখন সেটস্টেট () কল করুন।

ইভেন্ট বাস সেটআপ করতে আপনি ব্যবহার করতে পারেন এমন অনেকগুলি জিনিস রয়েছে। আপনি কেবল শ্রোতার একটি অ্যারে তৈরি করতে পারেন এবং ইভেন্ট প্রকাশের সময় সমস্ত শ্রোতা ইভেন্টটি গ্রহণ করবে। অথবা আপনি ইভেন্টেমিটার বা ডাকটেল এর মতো কিছু ব্যবহার করতে পারেন

---

সর্দি

ফ্ল্যাক্স মূলত ইভেন্টের বাস, ইভেন্ট রিসিভারের দোকানগুলি বাদে। প্রতিক্রিয়া ছাড়াই রাজ্য পরিচালিত ব্যতীত এটি বেসিক ইভেন্ট বাস সিস্টেমের মতো

আসল ফ্লাক্স বাস্তবায়ন হ্যাকি উপায়ে ইভেন্ট-সোর্সিং করার প্রয়াসের মতো দেখায়।

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

এগহেডের রেডাক্স ভিডিও টিউটোরিয়ালটি দুর্দান্ত and

---

এক্সিকিউটেবল-এর পাথ

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

ইমটুটেবল জেএস , রিএ্যাক্ট-কার্সার এবং সর্বজ্ঞানী সহ অনেকগুলি বাস্তবায়ন বিদ্যমান

২০১ Edit সম্পাদনা করুন : দেখে মনে হচ্ছে লোকে ছোট অ্যাপ্লিকেশনগুলির জন্য কার্সারকে ভাল কাজ করতে রাজি হয়েছে তবে জটিল অ্যাপ্লিকেশনগুলিতে এটি ভাল স্কেল করে না। ওম নেক্সটে আর কার্সার নেই (যদিও এটি ওম যা ধারণাটি প্রাথমিকভাবে প্রবর্তন করেছিল)

---

এলম আর্কিটেকচার

এলম স্থাপত্য এমন একটি নির্মাণ দ্বারা ব্যবহার করা হবে প্রস্তাব করা হয় এলম ভাষা । এমনকি যদি এলাম রিএ্যাকটিজেএস না হয় তবে এলমের আর্কিটেকচারটিও প্রতিক্রিয়াতে করা যেতে পারে।

রেডাক্সের লেখক ড্যান আব্রামভ রিএ্যাক্ট ব্যবহার করে এলম স্থাপত্যের একটি বাস্তবায়ন করেছিলেন।

রেডাক্স এবং এলম উভয়ই দুর্দান্ত এবং প্রান্তে ইভেন্ট-সোর্সিং ধারণাগুলি শক্তিশালী করার ঝোঁক, উভয়ই সময়-ভ্রমণের ডিবাগিং, পূর্বাবস্থায় / পুনরায়, পুনরায় খেলতে ...

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

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

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

---

এফআরপি

আরএক্সজেএস, ব্যাকনজেএস বা কেফিরের মতো লাইব্রেরিগুলি উপাদানগুলির মধ্যে যোগাযোগ পরিচালনা করতে এফআরপি স্ট্রিম উত্পাদন করতে ব্যবহার করা যেতে পারে।

আপনি উদাহরণস্বরূপ আরএক্স-প্রতিক্রিয়া চেষ্টা করতে পারেন

আমার মনে হয় এই লিব ব্যবহার বেশ কি ELM ভাষা অফার ব্যবহার অনুরূপ সংকেত ।

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

---

সিএসপি

সিএসপি (যোগাযোগের ক্রমযুক্ত প্রক্রিয়াগুলি) বর্তমানে জনপ্রিয় (বেশিরভাগ গো / গোরাউটাইনস এবং কোর.সেসেক / ক্লোজার স্ক্রিপ্টের কারণে) তবে আপনি এগুলিকে জেএস-সিএসপির সাহায্যে জাভাস্ক্রিপ্টেও ব্যবহার করতে পারেন ।

জেমস লং কীভাবে প্রতিক্রিয়ার মাধ্যমে এটি ব্যবহার করা যায় তা ব্যাখ্যা করে একটি ভিডিও করেছেন ।

কাহিনীগুলি

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

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

আপনি যদি আগ্রহী হন তবে আমার উত্তরটি একবার দেখুন

---

উপসংহার

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

আমি জানি না দীর্ঘমেয়াদে সর্বোত্তম বিকল্পটি কী তবে আমি সত্যিই পছন্দ করি যে কীভাবে ফ্লাক্স ইভেন্ট-সোর্সিংয়ের মতো দেখাচ্ছে।

আপনি যদি ইভেন্ট-সোর্সিং ধারণাগুলি জানেন না, তবে এই খুব শিক্ষাগত ব্লগটি একবার দেখুন: অ্যাপাচি সামজার সাথে ডাটাবেসটির ভিতরে ঘুরিয়ে দেওয়া , কেন ফ্লাক্স চমৎকার তা বুঝতে হবে (তবে এটি এফআরপি-তেও প্রয়োগ হতে পারে) )

আমি মনে করি সম্প্রদায়টি সম্মত হয় যে সবচেয়ে প্রতিশ্রুতিবদ্ধ ফ্লাক্স বাস্তবায়ন হ'ল রেডাক্স , যা উত্তপ্তভাবে পুনরায় লোডিংয়ের জন্য খুব উত্পাদনশীল বিকাশকারীকে অভিজ্ঞতার অনুমতি দেবে। প্রিন্সিপাল ভিডিওতে চিত্তাকর্ষক লাইভকডিং আলা ব্রেট ভিক্টরের আবিষ্কার সম্ভব!

Comments

দুর্দান্ত উত্তর সেব!

— আলী গাজানী

Answer 3

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

সুতরাং Redux আপনার জন্য কি করে?

রেডাক্স আপনার অ্যাপ্লিকেশনটির স্থানীয় স্টোরেজের মতো যা আপনার অ্যাপ্লিকেশনের বিভিন্ন স্থানে যখনই ডেটা ব্যবহারের প্রয়োজন হয় তখনই ব্যবহার করা যেতে পারে ...

মূলত, রেডাক্স ধারণাটি মূলত প্রবাহ থেকে আসে তবে কেবলমাত্র একটি স্টোর তৈরি করে সত্যের একটি উত্স থাকার ধারণা সহ কিছু মৌলিক পরিবর্তন ...

ফ্লাক্স এবং রেডাক্সের মধ্যে কিছু পার্থক্য দেখতে নীচের গ্রাফটি দেখুন ...

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

এছাড়াও রেডাক্স ডকুমেন্টেশন থেকে এই শব্দগুলি পড়া শুরু করা সহায়ক হতে পারে:

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

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

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

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

পদক্ষেপ অনুসরণ সর্দি, CQRS, এবং ইভেন্ট উৎস , রাষ্ট্র পরিব্যক্তি কখন কিভাবে আপডেট ঘটতে পারে নির্দিষ্ট বিধিনিষেধ জারি করে আন্দাজের করতে Redux প্রচেষ্টা । এই বিধিনিষেধগুলি রেডাক্সের তিনটি নীতিতে প্রতিফলিত হয়।

Comments

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

— মডেল

@vsync রিডাক্সকে একটি একক স্থিতিশীল মান হিসাবে ভাবেন না, রিডাক্সের আসলে বস্তু, অ্যারে থাকতে পারে ... যাতে আপনি সেগুলিকে বস্তু বা অ্যারে হিসাবে সংরক্ষণ করতে পারেন বা আপনার স্টোরের যা কিছু রাখতে পারেন, এটি ম্যাপডিস্কটপ্রোপ হতে পারে এবং প্রতিটি বস্তুর অ্যারেতে সংরক্ষণ করা যায় each পছন্দ: [{নাম: "পিকার 1", মান: "01/01/1970"}, {নাম: "পিকার 2", মান: "01/01/1980"}] এবং তারপরে মাতাপিতাতে ম্যাপস্টেটট্রপগুলি ব্যবহার করুন এবং এটিকে এখানে প্রবেশ করুন আপনি যে প্রতিটি উপাদান বা যেখানেই চান, এটি আপনার প্রশ্নের উত্তর দেয় কিনা তা নিশ্চিত নয়, তবে কোডটি না দেখে ... যদি তারা পৃথক গোষ্ঠীতে থাকে তবে আপনি আরও বিশদ নিয়ে আপত্তি জানাতে পারেন ... তবে এটি কীভাবে আপনি গ্রুপ করতে চান তা সম্পূর্ণরূপে তাদের ..

— আলিরেজা

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

— vsync

Answer 4

এইভাবেই আমি এটি পরিচালনা করেছি।
ধরা যাক আপনার কাছে মাসের জন্য একটি <নির্বাচন> এবং দিনের জন্য একটি <নির্বাচন> রয়েছে । দিনের সংখ্যা নির্বাচিত মাসের উপর নির্ভর করে।

উভয় তালিকার তৃতীয় অবজেক্ট বাম প্যানেলের মালিকানা রয়েছে। উভয় <সিলেক্ট> বামপ্যানেলের বাচ্চা <ডিভিটি>
এটি কলব্যাক এবং বামপ্যানেলের হ্যান্ডলারের সাথে একটি খেলা উপাদানটির ।

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

dates.js

    /** @jsx React.DOM */


    var monthsLength = [0,31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    var MONTHS_ARR = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    var DayNumber = React.createClass({
        render: function() {
            return (
                <option value={this.props.dayNum}>{this.props.dayNum}</option>
            );
        }
    });

    var DaysList = React.createClass({
        getInitialState: function() {
            return {numOfDays: 30};
        },
        handleMonthUpdate: function(newMonthix) {
            this.state.numOfDays = monthsLength[newMonthix];
            console.log("Setting days to " + monthsLength[newMonthix] + " month = " + newMonthix);

            this.forceUpdate();
        },
        handleDaySelection: function(evt) {
            this.props.dateHandler(evt.target.value);
        },
        componentDidMount: function() {
            this.props.readyCallback(this.handleMonthUpdate)
        },
        render: function() {
            var dayNodes = [];
            for (i = 1; i <= this.state.numOfDays; i++) {
                dayNodes = dayNodes.concat([<DayNumber dayNum={i} />]);
            }
            return (
                <select id={this.props.id} onChange = {this.handleDaySelection}>
                    <option value="" disabled defaultValue>Day</option>
                        {dayNodes}
                </select>
                );
        }
    });

    var Month = React.createClass({
        render: function() {
            return (
                <option value={this.props.monthIx}>{this.props.month}</option>
            );
        }
    });

    var MonthsList = React.createClass({
        handleUpdate: function(evt) {
            console.log("Local handler:" + this.props.id + " VAL= " + evt.target.value);
            this.props.dateHandler(evt.target.value);

            return false;
        },
        render: function() {
            var monthIx = 0;

            var monthNodes = this.props.data.map(function (month) {
                monthIx++;
                return (
                    <Month month={month} monthIx={monthIx} />
                    );
            });

            return (
                <select id = {this.props.id} onChange = {this.handleUpdate}>
                    <option value="" disabled defaultValue>Month</option>
                        {monthNodes}
                </select>
                );
        }
    });

    var LeftPanel = React.createClass({
        dayRefresh: function(newMonth) {
            // Nothing - will be replaced
        },
        daysReady: function(refreshCallback) {
            console.log("Regisering days list");
        this.dayRefresh = refreshCallback;
        },
        handleMonthChange: function(monthIx) {
            console.log("New month");
            this.dayRefresh(monthIx);
        },
        handleDayChange: function(dayIx) {
            console.log("New DAY: " + dayIx);
        },
        render: function() {
            return(
                <div id="orderDetails">
                    <DaysList id="dayPicker" dateHandler={this.handleDayChange} readyCallback = {this.daysReady} />
                    <MonthsList data={MONTHS_ARR} id="monthPicker" dateHandler={this.handleMonthChange}  />
                </div>
            );
        }
    });



    React.renderComponent(
        <LeftPanel />,
        document.getElementById('leftPanel')
    );

এবং বাম প্যানেল উপাদান index.html চালানোর জন্য এইচটিএমএল

<!DOCTYPE html>
<html>
<head>
    <title>Dates</title>

    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
    <script src="//fb.me/react-0.11.1.js"></script>
    <script src="//fb.me/JSXTransformer-0.11.1.js"></script>
</head>

    <style>

        #dayPicker {
            position: relative;
            top: 97px;
            left: 20px;
            width: 60px;
            height: 17px;
        }

        #monthPicker {
            position: relative;
            top: 97px;
            left: 22px;
            width: 95px;
            height: 17px;
        }

        select {
            font-size: 11px;
        }

    </style>


    <body>
        <div id="leftPanel">
        </div>

        <script type="text/jsx" src="dates.js"></script>

    </body>
</html>

Comments

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

— vsync

Answer 5

আমি দেখেছি যে ইতিমধ্যে প্রশ্নের উত্তর দেওয়া হয়েছে, তবে আপনি যদি আরও বিশদ জানতে চান তবে উপাদানগুলির মধ্যে যোগাযোগের মোট 3 টি ঘটনা রয়েছে :

• কেস 1: শিশু যোগাযোগের পিতামাতার
• কেস ২: শিশু থেকে পিতামাতার যোগাযোগ
• কেস 3: সম্পর্কিত নয় উপাদান (কোনও উপাদান কোনও উপাদান) যোগাযোগ

Answer 6

@ মিশেললোক্রিক্সের উত্তর প্রসারিত করার সময় যখন একটি দৃশ্যের বিষয়গুলি হয় যে উপাদানগুলি যে কোনও ধরণের পিতা-সন্তানের সম্পর্কের মধ্যে যোগাযোগ করতে পারে না, ডকুমেন্টেশনটি বিশ্বব্যাপী ইভেন্ট সিস্টেম স্থাপনের পরামর্শ দেয়।

উপরোক্ত সম্পর্কের কোনও ক্ষেত্রে না থাকলে <Filters />এবং <TopBar />না থাকলে, একটি সাধারণ গ্লোবাল ইমিটার এভাবে ব্যবহার করা যেতে পারে:

componentDidMount - ইভেন্ট সাবস্ক্রাইব

componentWillUnmount - ইভেন্ট থেকে সাবস্ক্রাইব করুন

প্রতিক্রিয়া.জেএস এবং ইভেন্ট সিস্টেম কোড

EventSystem.js

class EventSystem{

    constructor() {
        this.queue = {};
        this.maxNamespaceSize = 50;
    }

    publish(/** namespace **/ /** arguments **/) {
        if(arguments.length < 1) {
            throw "Invalid namespace to publish";
        }

        var namespace = arguments[0];
        var queue = this.queue[namespace];

        if (typeof queue === 'undefined' || queue.length < 1) {
            console.log('did not find queue for %s', namespace);
            return false;
        }

        var valueArgs = Array.prototype.slice.call(arguments);

        valueArgs.shift(); // remove namespace value from value args

        queue.forEach(function(callback) {
            callback.apply(null, valueArgs);
        });

        return true;
    }

    subscribe(/** namespace **/ /** callback **/) {
        const namespace = arguments[0];
        if(!namespace) throw "Invalid namespace";
        const callback = arguments[arguments.length - 1];
        if(typeof callback !== 'function') throw "Invalid callback method";

        if (typeof this.queue[namespace] === 'undefined') {
            this.queue[namespace] = [];
        }

        const queue = this.queue[namespace];
        if(queue.length === this.maxNamespaceSize) {
            console.warn('Shifting first element in queue: `%s` since it reached max namespace queue count : %d', namespace, this.maxNamespaceSize);
            queue.shift();
        }

        // Check if this callback already exists for this namespace
        for(var i = 0; i < queue.length; i++) {
            if(queue[i] === callback) {
                throw ("The exact same callback exists on this namespace: " + namespace);
            }
        }

        this.queue[namespace].push(callback);

        return [namespace, callback];
    }

    unsubscribe(/** array or topic, method **/) {
        let namespace;
        let callback;
        if(arguments.length === 1) {
            let arg = arguments[0];
            if(!arg || !Array.isArray(arg)) throw "Unsubscribe argument must be an array";
            namespace = arg[0];
            callback = arg[1];
        }
        else if(arguments.length === 2) {
            namespace = arguments[0];
            callback = arguments[1];
        }

        if(!namespace || typeof callback !== 'function') throw "Namespace must exist or callback must be a function";
        const queue = this.queue[namespace];
        if(queue) {
            for(var i = 0; i < queue.length; i++) {
                if(queue[i] === callback) {
                    queue.splice(i, 1); // only unique callbacks can be pushed to same namespace queue
                    return;
                }
            }
        }
    }

    setNamespaceSize(size) {
        if(!this.isNumber(size)) throw "Queue size must be a number";
        this.maxNamespaceSize = size;
        return true;
    }

    isNumber(n) {
        return !isNaN(parseFloat(n)) && isFinite(n);
    }

}

NotificationComponent.js

class NotificationComponent extends React.Component {

    getInitialState() {
        return {
            // optional. see alternative below
            subscriber: null
        };
    }

    errorHandler() {
        const topic = arguments[0];
        const label = arguments[1];
        console.log('Topic %s label %s', topic, label);
    }

    componentDidMount() {
        var subscriber = EventSystem.subscribe('error.http', this.errorHandler);
        this.state.subscriber = subscriber;
    }

    componentWillUnmount() {
        EventSystem.unsubscribe('error.http', this.errorHandler);

        // alternatively
        // EventSystem.unsubscribe(this.state.subscriber);
    }

    render() {

    }
}

Answer 7

সন্তানের সম্পর্ক - এমনকি পিতা-মাতার না হলেও এমন সম্ভাবনা রয়েছে এবং এটি ফ্লাক্স। Alt.JS নামে পরিচিত (আল্ট-কনটেইনার সহ) এর জন্য বেশ ভাল (ব্যক্তিগতভাবে আমার) বাস্তবায়ন রয়েছে।

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

আপনি তখন AltContainer এর মতো ব্যবহার করতে পারেন

<AltContainer stores={{
                    SidebarStore: SidebarStore
                }}>
                    <Sidebar/>
</AltContainer>

{this.props.content}

যা স্টোর রাখবে (ভাল আমি "স্টোর" প্রপ এর পরিবর্তে "স্টোর" ব্যবহার করতে পারি)। এখন, {this.props.content route রুটের উপর নির্ভর করে বিশদ থাকতে পারে। আসুন বলুন যে / বিশদগুলি আমাদের সেই দৃশ্যে পুনর্নির্দেশ করে। বিশদগুলিতে উদাহরণস্বরূপ এমন একটি চেকবক্স থাকবে যা সাইডবার উপাদানটি X থেকে Y এ পরিবর্তন করবে যদি এটি পরীক্ষা করা হয়।

প্রযুক্তিগতভাবে তাদের মধ্যে কোনও সম্পর্ক নেই এবং প্রবাহ ছাড়াই এটি করা কঠিন হবে। তবে এটি বরং সহজ।

এখন বিশদঅ্যাকশনগুলিতে আসুন। আমরা সেখানে তৈরি করব

class SiteActions {
constructor() {
    this.generateActions(
        'setSiteComponentStore'
    );
}

setSiteComponent(value) {
    this.dispatch({value: value});
}
}

এবং বিবরণ স্টোর

class SiteStore {
constructor() {
    this.siteComponents = {
        Prop: true
    };

    this.bindListeners({
        setSiteComponent: SidebarActions.COMPONENT_STATUS_CHANGED
    })
}

setSiteComponent(data) {
    this.siteComponents.Prop = data.value;
}
}

এবং এখন, এটি সেই জায়গা যেখানে জাদু শুরু হয়।

আপনি যেমন দেখতে পাচ্ছেন সাইডবারএকশনস-এর জন্য বাইন্ডলিস্টার রয়েছে omp

এখন সাইডবারএকশনে

    componentStatusChanged(value){
    this.dispatch({value: value});
}

আমাদের এমন জিনিস আছে। এটি কলটিতে সেই বস্তুটি প্রেরণ করবে। এবং স্টোরের সেটসাইট কম্পোনেন্টটি ব্যবহার করা হলে এটি বলা হবে (যা আপনি উদাহরণস্বরূপ বোতামে অন চেঞ্জ করার সময় কোনও কিছুতে ব্যবহার করতে পারেন) যাই হোক না কেন)

এখন সাইডবারস্টোরে আমাদের থাকবে

    constructor() {
    this.structures = [];

    this.bindListeners({
        componentStatusChanged: SidebarActions.COMPONENT_STATUS_CHANGED
    })
}

    componentStatusChanged(data) {
    this.waitFor(DetailsStore);

    _.findWhere(this.structures[0].elem, {title: 'Example'}).enabled = data.value;
}

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

tl; dr ওয়ান স্টোর কোনও স্টোরের পদ্ধতিগুলি শুনছে, এবং উপাদান ক্রিয়াকলাপ থেকে একটি ক্রিয়াকলাপ উত্সাহিত করবে যা এটি নিজস্ব স্টোর আপডেট করবে।

আমি আশা করি এটি কোনওভাবে আপনাকে সহায়তা করতে পারে।

Answer 8

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

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

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

অন্যান্য বিকল্প কিছু হতবুদ্ধি fluxxor fluxible এবং redux ।

Answer 9

আপনি এখন ঠিক যেখানেই ছিলেন আমি একসময় সেখানে ছিলাম, একজন শিক্ষানবিস হিসাবে আপনি কখনও কখনও কীভাবে প্রতিক্রিয়া জানাতে চান তা স্থান থেকে দূরে অনুভব করেন। আমি এখনই এটিকে যেভাবে মনে করি ঠিক সেভাবেই সামাল দেওয়ার চেষ্টা করব।

রাষ্ট্রগুলি যোগাযোগের মূল ভিত্তি

সাধারণত এটি যেটিতে নেমে আসে তা হ'ল আপনি যেভাবে এই উপাদানটিতে রাজ্যগুলিকে পরিবর্তন করেন আপনার ক্ষেত্রে আপনি তিনটি উপাদান চিহ্নিত করেন।

<List />: যা সম্ভবত কোনও ফিল্টারের উপর নির্ভর করে আইটেমগুলির একটি তালিকা প্রদর্শন করবে <Filters />: ফিল্টার অপশন যা আপনার ডেটা পরিবর্তন করবে। <TopBar />: বিকল্পের তালিকা।

এই সমস্ত মিথস্ক্রিয়াটি অর্কেস্ট্রেট করার জন্য আপনাকে একটি উচ্চতর উপাদানের প্রয়োজন হবে যাক একে অ্যাপ্লিকেশন বলা যাক, এটি প্রতিটি উপাদানকে ক্রিয়া এবং ডেটা সরবরাহ করবে যাতে উদাহরণস্বরূপ এটি দেখতে পারা যায় can

<div>
  <List items={this.state.filteredItems}/>
  <Filter filter={this.state.filter} setFilter={setFilter}/>
</div>

সুতরাং যখন setFilterবলা হয় এটি ফিল্টারড আইটেমকে প্রভাবিত করবে এবং উভয় উপাদানকে পুনরায় রেন্ডার করবে will যদি এটি পুরোপুরি পরিষ্কার না হয় তবে আমি আপনাকে চেকবক্সের সাথে একটি উদাহরণ দিয়েছি যা আপনি একটি একক ফাইলে চেক করতে পারেন:

import React, {Component} from 'react';
import {render} from 'react-dom';

const Person  = ({person, setForDelete}) => (
          <div>
            <input type="checkbox" name="person" checked={person.checked} onChange={setForDelete.bind(this, person)} />
            {person.name}
          </div>
);


class PeopleList extends Component {

  render() {

    return(
      <div>
       {this.props.people.map((person, i) => {
         return <Person key={i} person={person} setForDelete={this.props.setForDelete} />;
       })}
       <div onClick={this.props.deleteRecords}>Delete Selected Records</div>
     </div>
    );
  }

} // end class

class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {people:[{id:1, name:'Cesar', checked:false},{id:2, name:'Jose', checked:false},{id:3, name:'Marbel', checked:false}]}
  }

  deleteRecords() {
    const people = this.state.people.filter(p => !p.checked);

    this.setState({people});
 }

  setForDelete(person) {
    const checked = !person.checked;
    const people = this.state.people.map((p)=>{
      if(p.id === person.id)
        return {name:person.name, checked};
      return p;
    });

    this.setState({people});
  }

  render () {

    return <PeopleList people={this.state.people} deleteRecords={this.deleteRecords.bind(this)} setForDelete={this.setForDelete.bind(this)}/>;
  }
}

render(<App/>, document.getElementById('app'));

Answer 10

নিম্নলিখিত কোডটি আমাকে দুই ভাইবোনের মধ্যে যোগাযোগ স্থাপনে সহায়তা করে। সেটআপটি তাদের পিতামাতার মধ্যে () এবং কম্পোনেন্টডিডমাউন্ট () কল সরবরাহের সময় করা হয়। এটি https://reactjs.org/docs/refs-and-the-dom.html এর উপর ভিত্তি করে আশা করি এটি সহায়তা করবে।

class App extends React.Component<IAppProps, IAppState> {
    private _navigationPanel: NavigationPanel;
    private _mapPanel: MapPanel;

    constructor() {
        super();
        this.state = {};
    }

    // `componentDidMount()` is called by ReactJS after `render()`
    componentDidMount() {
        // Pass _mapPanel to _navigationPanel
        // It will allow _navigationPanel to call _mapPanel directly
        this._navigationPanel.setMapPanel(this._mapPanel);
    }

    render() {
        return (
            <div id="appDiv" style={divStyle}>
                // `ref=` helps to get reference to a child during rendering
                <NavigationPanel ref={(child) => { this._navigationPanel = child; }} />
                <MapPanel ref={(child) => { this._mapPanel = child; }} />
            </div>
        );
    }
}

Comments

এটি টাইপস্ক্রিপ্ট, সম্ভবত আপনার উত্তরে উল্লেখ করা উচিত। যদিও ভাল ধারণা।

— সেরোসায়েস

Answer 11

অদ্ভুতভাবে কেউ উল্লেখ করেনি mobx। মতামত অনুরূপ redux। আমার কাছে যদি এমন এক টুকরো ডেটা থাকে যা একাধিক উপাদান এতে সাবস্ক্রাইব হয় তবে আমি একাধিক উপাদান ড্রাইভ করতে এই ডেটা ব্যবহার করতে পারি।