আমি ফ্লাক্স আর্কিটেকচারের সাথে একটি রিঅ্যাক্ট.জেএস অ্যাপ্লিকেশন তৈরি করছি এবং কোথায় এবং কখন সার্ভার থেকে ডেটার জন্য অনুরোধ করা উচিত তা জানার চেষ্টা করছি। এর কোন উদাহরণ আছে কি? (টোডো অ্যাপ্লিকেশন নয়!)
আমি ফ্লাক্স আর্কিটেকচারের সাথে একটি রিঅ্যাক্ট.জেএস অ্যাপ্লিকেশন তৈরি করছি এবং কোথায় এবং কখন সার্ভার থেকে ডেটার জন্য অনুরোধ করা উচিত তা জানার চেষ্টা করছি। এর কোন উদাহরণ আছে কি? (টোডো অ্যাপ্লিকেশন নয়!)
উত্তর:
আমি অ্যাসিঙ্ক রাইটিং অপারেশনগুলি অ্যাকশন নির্মাতাদের এবং এসিঙ্ক রিড অপারেশনগুলিতে স্টোরটিতে রাখার বড় প্রবক্তা। লক্ষ্যটি হ'ল স্টোরের রাজ্য পরিবর্তন কোডটি সম্পূর্ণ সিঙ্ক্রোনাস অ্যাকশন হ্যান্ডলারগুলিতে রাখা; এটি তাদের বিতর্ক সম্পর্কিত সহজ এবং ইউনিট পরীক্ষার থেকে সহজ করে তোলে। একই শেষ পয়েন্টে (যেমন, ডাবল রিডিং) একাধিক একযোগে অনুরোধ রোধ করার জন্য, আমি আসল অনুরোধ প্রক্রিয়াকরণটিকে একটি পৃথক মডিউলে স্থানান্তর করব যা একাধিক অনুরোধগুলি প্রতিরোধের প্রতিশ্রুতি ব্যবহার করে; উদাহরণ স্বরূপ:
class MyResourceDAO {
get(id) {
if (!this.promises[id]) {
this.promises[id] = new Promise((resolve, reject) => {
// ajax handling here...
});
}
return this.promises[id];
}
}
স্টোর পড়ার সময় অ্যাসিক্রোনাস ফাংশন জড়িত থাকাকালীন একটি গুরুত্বপূর্ণ সতর্কতা রয়েছে যে স্টোরগুলি নিজেকে অ্যাসিঙ্ক হ্যান্ডলারগুলিতে আপডেট করে না, বরং পরিবর্তে কোনও পদক্ষেপ নেয় এবং প্রতিক্রিয়া উপস্থিত হলে কেবল অ্যাকশন চালায়। এই ক্রিয়াকলাপের হ্যান্ডলারগুলি প্রকৃত রাজ্য সংশোধন করে।
উদাহরণস্বরূপ, কোনও উপাদান এটি করতে পারে:
getInitialState() {
return { data: myStore.getSomeData(this.props.id) };
}
স্টোরটিতে একটি পদ্ধতি প্রয়োগ করা হবে, সম্ভবত, এরকম কিছু:
class Store {
getSomeData(id) {
if (!this.cache[id]) {
MyResurceDAO.get(id).then(this.updateFromServer);
this.cache[id] = LOADING_TOKEN;
// LOADING_TOKEN is a unique value of some kind
// that the component can use to know that the
// value is not yet available.
}
return this.cache[id];
}
updateFromServer(response) {
fluxDispatcher.dispatch({
type: "DATA_FROM_SERVER",
payload: {id: response.id, data: response}
});
}
// this handles the "DATA_FROM_SERVER" action
handleDataFromServer(action) {
this.cache[action.payload.id] = action.payload.data;
this.emit("change"); // or whatever you do to re-render your app
}
}
fluxস্টোরগুলিতে নির্মাণের পরে ইনজেকশন দেওয়া হয়, সুতরাং আরম্ভের পদ্ধতিতে ক্রিয়া পাওয়ার কোনও দুর্দান্ত উপায়। ইয়াহুর আইসোমোরোফিক ফ্লাক্স লাইবস থেকে আপনি কিছু ভাল ধারণা পেতে পারেন; এটি ফ্লাক্সক্সর ভি 2 এর আরও ভাল সমর্থন করা উচিত। আপনি এই সম্পর্কে আরও চ্যাট করতে চাইলে নির্দ্বিধায় আমাকে ইমেল করুন।
data: resultহওয়া উচিত data : data, ঠিক? নেই result। প্যালোড বা এর মতো কিছুতে ডেটা প্যারামের নামকরণ করা আরও ভাল।
ফ্লাক্সক্সারের একটি এপিআই দিয়ে অ্যাসিঙ্ক যোগাযোগের একটি উদাহরণ রয়েছে।
এই ব্লগ পোস্টটিতে এটি সম্পর্কে আলোচনা হয়েছে এবং প্রতিক্রিয়াটির ব্লগে প্রদর্শিত হয়েছে।
আমি এটি একটি খুব গুরুত্বপূর্ণ এবং কঠিন প্রশ্নের সন্ধান পেয়েছি যার পরিষ্কারভাবে এখনও উত্তর দেওয়া হয়নি, কারণ ব্যাকএন্ডের সাথে ফ্রন্টএন্ড সফ্টওয়্যার সিঙ্ক্রোনাইজেশন এখনও একটি ব্যথা।
জেএসএক্স উপাদানগুলিতে এপিআই অনুরোধগুলি করা উচিত? দোকান? অন্য স্থান?
স্টোরগুলিতে অনুরোধ সম্পাদনের অর্থ এই যে যদি 2 টি স্টোরকে কোনও প্রদত্ত ক্রিয়াটির জন্য একই ডেটার দরকার হয় তবে তারা 2 টি অনুরূপ রিকোয়েট জারি করবে (যদি না আপনি স্টোরগুলির মধ্যে নির্ভরতা প্রবর্তন করেন যা আমি সত্যিই পছন্দ করি না )
আমার ক্ষেত্রে, আমি কিউ এর প্রতিশ্রুতিগুলিকে পদক্ষেপের ভার হিসাবে বিবেচনা করতে খুব সহজ বলে মনে করেছি কারণ:
অ্যাজাক্স ইভিএল
আমি মনে করি অজ্যাক্স অদূর ভবিষ্যতে কম এবং কম ব্যবহৃত হবে কারণ এটি সম্পর্কে तर्क করা খুব কঠিন। সঠিক পথ? বিতরণ ব্যবস্থার অংশ হিসাবে ডিভাইসগুলি বিবেচনা করে আমি জানি না আমি কোথায় এই ধারণাটি প্রথম পেলাম (সম্ভবত এই অনুপ্রেরণাকারী ক্রিস গ্রেঞ্জার ভিডিওতে )।
চিন্তা করুন. এখন স্কেলিবিলিটির জন্য আমরা স্টোরেজ ইঞ্জিন হিসাবে শেষ ধারাবাহিকতা সহ বিতরণকারী সিস্টেমগুলি ব্যবহার করি (কারণ আমরা সিএপি উপপাদ্যকে পরাজিত করতে পারি না এবং প্রায়শই আমরা উপলভ্য হতে চাই)। এই সিস্টেমগুলি একে অপরকে ভোট দেওয়ার মাধ্যমে সিঙ্ক করে না (সম্ভবত sensক্যমতের অপারেশন ছাড়া?) বরং বিতরণ ব্যবস্থার সমস্ত সদস্যকে শেষ পর্যন্ত সামঞ্জস্যপূর্ণ করার জন্য সিআরডিটি এবং ইভেন্ট লগের মতো কাঠামো ব্যবহার করে (সদস্যরা পর্যাপ্ত সময় দেওয়ার সাথে সাথে একই ডেটাতে রূপান্তরিত করবে) ।
এখন মোবাইল ডিভাইস বা ব্রাউজারটি কী তা নিয়ে ভাবেন। এটি কেবল বিতরণ ব্যবস্থার একটি সদস্য যা নেটওয়ার্কের বিলম্বিতা এবং নেটওয়ার্ক বিভাজনে ভুগতে পারে। (যেমন আপনি সাবওয়েতে আপনার স্মার্টফোন ব্যবহার করছেন)
যদি আমরা নেটওয়ার্ক পার্টিশন এবং নেটওয়ার্ক স্পিড সহনশীল ডেটাবেসগুলি তৈরি করতে পারি (মানে আমরা এখনও একটি বিচ্ছিন্ন নোডে রাইটিং অপারেশন করতে পারি), আমরা সম্ভবত এই ধারণাগুলি দ্বারা অনুপ্রাণিত ফ্রন্টএন্ড সফ্টওয়্যার (মোবাইল বা ডেস্কটপ) তৈরি করতে পারি, এটি অফলাইন মোড সমর্থিত আউটপুট মোডের সাথে ভাল কাজ করে অ্যাপ্লিকেশন ছাড়াই বাক্সটির অপ্রাপ্যতা বৈশিষ্ট্য রয়েছে।
আমি মনে করি আমাদের আধ্যাত্মিক অ্যাপ্লিকেশনগুলির আর্কিটেকচারে কীভাবে ডাটাবেসগুলি কাজ করছে সে সম্পর্কে আমাদের সত্যই অনুপ্রাণিত করা উচিত। একটি বিষয় লক্ষণীয় হ'ল এই অ্যাপ্লিকেশনগুলি একে অপরের কাছে ডেটা প্রেরণের জন্য POST এবং PUT এবং GET AJAX অনুরোধ সম্পাদন করে না, বরং ইভেন্টের লগগুলি এবং সিআরডিটি ব্যবহার করে চূড়ান্ত ধারাবাহিকতা নিশ্চিত করে।
তাহলে সীমান্তে কেন করবেন না? লক্ষ করুন যে ব্যাকএন্ডটি ইতিমধ্যে সেই দিকে এগিয়ে চলেছে, কাফকার মতো সরঞ্জাম বড় আকারের খেলোয়াড়দের দ্বারা ব্যাপকভাবে গৃহীত হয়েছে। এটি কোনওভাবে ইভেন্ট সোর্সিং / সিকিউআরএস / ডিডিডি সম্পর্কিত।
নিজেকে বোঝাতে কাফকার লেখকদের কাছ থেকে এই দুর্দান্ত নিবন্ধগুলি দেখুন:
সম্ভবত আমরা সার্ভারে কমান্ড প্রেরণ করে এবং আজাক্স অনুরোধগুলি ফায়ার করার পরিবর্তে সার্ভার ইভেন্টগুলির একটি স্ট্রিম (উদাহরণ হিসাবে ওয়েবস্কোটের মাধ্যমে) গ্রহণ করতে শুরু করতে পারি।
আমি আজাক্স অনুরোধের সাথে খুব স্বাচ্ছন্দ্য বোধ করি না। আমরা প্রতিক্রিয়া হিসাবে বিকাশকারীগুলি কার্যকরী প্রোগ্রামার হতে থাকে be আমি মনে করি যে স্থানীয় তথ্য যা আপনার সীমান্ত অ্যাপ্লিকেশনটির "সত্যের উত্স" বলে মনে করা শক্ত, যদিও সত্যের আসল উত্সটি সার্ভার ডাটাবেসে আসলে এবং আপনার "স্থানীয়" সত্যের উত্স ইতিমধ্যে পুরানো হতে পারে আপনি যখন এটি গ্রহণ করবেন এবং আপনি কোনও খোঁড়া রিফ্রেশ বোতাম টিপুন না হলে সত্যের আসল উত্সে কখনই রূপান্তর করতে পারবেন না ... এই ইঞ্জিনিয়ারিং কি?
তবে কিছু স্পষ্ট কারণের জন্য এ জাতীয় জিনিসটি ডিজাইন করা এখনও কিছুটা কঠিন:
this.dispatch("LOAD_DATA", {dataPromise: yourPromiseHere});
আপনি অ্যাকশন নির্মাতাদের বা স্টোরগুলিতে ডেটা কল করতে পারেন। গুরুত্বপূর্ণ বিষয়টি হ'ল প্রতিক্রিয়াটি সরাসরি পরিচালনা করা নয়, তবে ত্রুটি / সাফল্য কলব্যাকে একটি ক্রিয়া তৈরি করা। সরাসরি দোকানে প্রতিক্রিয়া হ্যান্ডেল করার ফলে আরও ভঙ্গুর ডিজাইনের দিকে পরিচালিত হয়।
আমি বাইনারি মিউজিকের উদাহরণটি ফ্লাক্সক্সোর এজাক্স উদাহরণ থেকে ব্যবহার করেছি । একই পদ্ধতির ব্যবহার করে এখানে আমার খুব সাধারণ উদাহরণ।
আমার কাছে একটি সাধারণ পণ্য স্টোর রয়েছে যা কিছু পণ্য ক্রিয়া এবং নিয়ামক-ভিউ উপাদান যা উপ-উপাদান রয়েছে যা প্রত্যেকে পণ্য স্টোরের পরিবর্তনের প্রতিক্রিয়া জানায় । উদাহরণস্বরূপ পণ্য-স্লাইডার , পণ্য তালিকা এবং পণ্য-অনুসন্ধান উপাদান।
নকল পণ্য ক্লায়েন্ট
এখানে এমন নকল ক্লায়েন্ট যা আপনি আসল শেষ পয়েন্ট প্রত্যাবর্তনকারী পণ্যের কল করার বিকল্প নিতে পারেন itute
var ProductClient = {
load: function(success, failure) {
setTimeout(function() {
var ITEMS = require('../data/product-data.js');
success(ITEMS);
}, 1000);
}
};
module.exports = ProductClient;
পণ্য দোকান
এখানে পণ্য স্টোর, স্পষ্টতই এটি একটি খুব ন্যূনতম স্টোর।
var Fluxxor = require("fluxxor");
var store = Fluxxor.createStore({
initialize: function(options) {
this.productItems = [];
this.bindActions(
constants.LOAD_PRODUCTS_SUCCESS, this.onLoadSuccess,
constants.LOAD_PRODUCTS_FAIL, this.onLoadFail
);
},
onLoadSuccess: function(data) {
for(var i = 0; i < data.products.length; i++){
this.productItems.push(data.products[i]);
}
this.emit("change");
},
onLoadFail: function(error) {
console.log(error);
this.emit("change");
},
getState: function() {
return {
productItems: this.productItems
};
}
});
module.exports = store;
এখন পণ্য ক্রিয়াগুলি, যা এজেএক্স অনুরোধ করে এবং সাফল্যের সাথে LOAD_PRODUCTS_SUCCESS ক্রিয়াটিকে পণ্যগুলিতে দোকানে ফেরত দেয়।
পণ্য ক্রিয়া
var ProductClient = require("../fake-clients/product-client");
var actions = {
loadProducts: function() {
ProductClient.load(function(products) {
this.dispatch(constants.LOAD_PRODUCTS_SUCCESS, {products: products});
}.bind(this), function(error) {
this.dispatch(constants.LOAD_PRODUCTS_FAIL, {error: error});
}.bind(this));
}
};
module.exports = actions;
সুতরাং this.getFlux().actions.productActions.loadProducts()এই স্টোরটি শুনতে কোনও উপাদান থেকে কল করা পণ্য লোড করবে।
আপনি বিভিন্ন ক্রিয়াকলাপের কথা কল্পনা করতে পারেন যদিও এটি ব্যবহারকারীর ইন্টারঅ্যাকশনগুলিতে প্রতিক্রিয়া জানায় addProduct(id) removeProduct(id)... ইত্যাদি একই প্যাটার্ন অনুসরণ করে।
আশা করি যে উদাহরণটি খানিকটা সহায়তা করবে, কারণ আমি এটি প্রয়োগ করতে কিছুটা জটিল দেখলাম, তবে অবশ্যই আমার স্টোরগুলিকে 100% সিঙ্ক্রোনাস রাখতে সহায়তা করেছে।
আমি এখানে সম্পর্কিত একটি প্রশ্নের উত্তর দিয়েছি: ফ্লাস্টে নেস্টেড এপিআই কলগুলি কীভাবে পরিচালনা করবেন
ক্রিয়াকলাপগুলি এমন একটি জিনিস বলে ধারণা করা হয় না যা পরিবর্তনের কারণ হয়ে দাঁড়ায়। তাদের এমন সংবাদপত্রের মতো হওয়ার কথা যা বাইরের বিশ্বের পরিবর্তনের প্রয়োগকে অবহিত করে এবং তারপরে অ্যাপ্লিকেশনটি সেই সংবাদের প্রতিক্রিয়া জানায়। স্টোরগুলি নিজের মধ্যে পরিবর্তন ঘটায়। ক্রিয়াগুলি কেবল তাদের অবহিত করে।
ফ্লাক্সের নির্মাতা বিল ফিশার https://stackoverflow.com/a/26581808/4258088
আপনার মূলত যা করা উচিত তা হ'ল আপনার কোন ডেটা দরকার তা ক্রিয়া করে জানান। যদি স্টোরটি ক্রিয়া দ্বারা অবহিত হয় তবে এটি কিছু ডেটা আনার প্রয়োজন কিনা তা সিদ্ধান্ত নেওয়া উচিত।
প্রয়োজনীয় সমস্ত ডেটা সংগ্রহ / আনার জন্য স্টোর দায়ী হতে হবে। যদিও এটি লক্ষণীয় গুরুত্বপূর্ণ যে, স্টোরটি ডেটা অনুরোধ করে এবং প্রতিক্রিয়া পাওয়ার পরে, এটি স্টোর পরিচালনা করার / সরাসরি প্রতিক্রিয়া সংরক্ষণের বিরোধিতা করে আনীত ডেটা দিয়ে নিজেই একটি ক্রিয়া শুরু করে।
একটি স্টোর এমন কিছুর মতো দেখতে পারে:
class DataStore {
constructor() {
this.data = [];
this.bindListeners({
handleDataNeeded: Action.DATA_NEEDED,
handleNewData: Action.NEW_DATA
});
}
handleDataNeeded(id) {
if(neededDataNotThereYet){
api.data.fetch(id, (err, res) => {
//Code
if(success){
Action.newData(payLoad);
}
}
}
}
handleNewData(data) {
//code that saves data and emit change
}
}
এখানে আমার গ্রহণযোগ্যতা : http://www.thedreaming.org/2015/03/14/react-ajax/
আশা করি এইটি কাজ করবে. :)