(দ্রষ্টব্য: আমি জেএসএক্স হারমনি বিকল্পটি ব্যবহার করে ES6 সিনট্যাক্স ব্যবহার করেছি))
অনুশীলন হিসাবে, আমি একটি নমুনা ফ্লাক্স অ্যাপ্লিকেশন লিখেছিলাম যা ব্রাউজ Github usersএবং পুনরায় পোস্ট করতে দেয় ।
এটি ফিশারভেদেবদের উত্তরের উপর ভিত্তি করে তৈরি করা হয়েছে তবে এপিআই প্রতিক্রিয়াগুলিকে স্বাভাবিক করার জন্য আমি ব্যবহার করা একটি পদ্ধতির প্রতিফলনও ঘটায়।
ফ্লাক্স শেখার সময় আমি চেষ্টা করেছি এমন কয়েকটি পদ্ধতির নথিতে এটি তৈরি করেছি made
আমি এটিকে বাস্তব বিশ্বের কাছে রাখার চেষ্টা করেছি (পৃষ্ঠাগুলি, কোনও ভুয়া লোকালস্টোর এপিআই) নেই।
এখানে কয়েকটি বিট রয়েছে যার মধ্যে আমি বিশেষভাবে আগ্রহী:
আমি কীভাবে স্টোরকে শ্রেণিবদ্ধ করি
আমি অন্যান্য ফ্লুक्स উদাহরণগুলিতে, বিশেষত স্টোরগুলিতে দেখেছি এমন কয়েকটি সদৃশ এড়াতে চেষ্টা করেছি। আমি যৌক্তিকভাবে স্টোরগুলিকে তিনটি বিভাগে বিভক্ত করা দরকারী বলে মনে করেছি:
সামগ্রী স্টোরগুলিতে সমস্ত অ্যাপ সত্তা থাকে। আইডি থাকা প্রত্যেকটির নিজস্ব সামগ্রী স্টোর দরকার needs উপাদানগুলি যা পৃথক আইটেম সরবরাহ করে তা নতুন সামগ্রীর জন্য সামগ্রী স্টোরকে জিজ্ঞাসা করে।
সামগ্রী স্টোরগুলি সমস্ত সার্ভার ক্রিয়াকলাপ থেকে তাদের জিনিসগুলি সংগ্রহ করে harvest উদাহরণস্বরূপ, UserStore মধ্যে দেখায়action.response.entities.users যদি উপস্থিত থাকে নির্বিশেষে যার কর্ম বহিস্কার। কোন প্রয়োজন নেই switch। নরমালিজার এই ফর্ম্যাটটিতে কোনও API প্রতিক্রিয়াগুলি সমতল করা সহজ করে তোলে।
// Content Stores keep their data like this
{
7: {
id: 7,
name: 'Dan'
},
...
}
তালিকা স্টোরগুলি কিছু বিশ্বব্যাপী তালিকায় উপস্থিত সত্ত্বার আইডিগুলির নজর রাখে (যেমন "ফিড", "আপনার বিজ্ঞপ্তি")। এই প্রকল্পে, আমার কাছে এই জাতীয় স্টোর নেই তবে আমি ভেবেছিলাম যে আমি সেগুলি যেভাবেই উল্লেখ করব। তারা পৃষ্ঠাগুলি পরিচালনা করে।
তারা সাধারণত মাত্র কয়েক ক্রিয়া সাড়া (যেমন REQUEST_FEED, REQUEST_FEED_SUCCESS, REQUEST_FEED_ERROR)।
// Paginated Stores keep their data like this
[7, 10, 5, ...]
ইনডেক্সযুক্ত তালিকার স্টোরগুলি তালিকার স্টোরগুলির মতো তবে তারা একের সাথে একাধিক সম্পর্কের সংজ্ঞা দেয়। উদাহরণস্বরূপ, "ব্যবহারকারীর গ্রাহকগণ", "সংগ্রহস্থলের স্টারগাজার", "ব্যবহারকারীর সংগ্রহশালা"। তারা পৃষ্ঠাগুলিও পরিচালনা করে।
তারা সাধারণত মাত্র কয়েক ক্রিয়া সাড়া (যেমন REQUEST_USER_REPOS, REQUEST_USER_REPOS_SUCCESS, REQUEST_USER_REPOS_ERROR)।
বেশিরভাগ সামাজিক অ্যাপ্লিকেশনগুলিতে, আপনার কাছে এগুলির প্রচুর পরিমাণ রয়েছে এবং আপনি সেগুলির মধ্যে আরও একটি তৈরি করতে সক্ষম হতে চান want
// Indexed Paginated Stores keep their data like this
{
2: [7, 10, 5, ...],
6: [7, 1, 2, ...],
...
}
দ্রষ্টব্য: এগুলি প্রকৃত শ্রেণি বা কিছু নয়; আমি স্টোর সম্পর্কে ঠিক কীভাবে ভাবতে চাই তা এটি। যদিও আমি কয়েক জন সহায়ক তৈরি করেছি।
createStore
এই পদ্ধতিটি আপনাকে সর্বাধিক প্রাথমিক স্টোর দেয়:
createStore(spec) {
var store = merge(EventEmitter.prototype, merge(spec, {
emitChange() {
this.emit(CHANGE_EVENT);
},
addChangeListener(callback) {
this.on(CHANGE_EVENT, callback);
},
removeChangeListener(callback) {
this.removeListener(CHANGE_EVENT, callback);
}
}));
_.each(store, function (val, key) {
if (_.isFunction(val)) {
store[key] = store[key].bind(store);
}
});
store.setMaxListeners(0);
return store;
}
আমি এটি সমস্ত স্টোর তৈরি করতে ব্যবহার করি।
isInBag, mergeIntoBag
কন্টেন্ট স্টোরের জন্য দরকারী ছোট সহায়ক
isInBag(bag, id, fields) {
var item = bag[id];
if (!bag[id]) {
return false;
}
if (fields) {
return fields.every(field => item.hasOwnProperty(field));
} else {
return true;
}
},
mergeIntoBag(bag, entities, transform) {
if (!transform) {
transform = (x) => x;
}
for (var key in entities) {
if (!entities.hasOwnProperty(key)) {
continue;
}
if (!bag.hasOwnProperty(key)) {
bag[key] = transform(entities[key]);
} else if (!shallowEqual(bag[key], entities[key])) {
bag[key] = transform(merge(bag[key], entities[key]));
}
}
}
পৃষ্ঠাগুলি স্থিতি সংরক্ষণ করে এবং কিছু নির্দিষ্ট দৃser়তা প্রয়োগ করে (আনার সময় পৃষ্ঠা আনতে পারে না ইত্যাদি)।
class PaginatedList {
constructor(ids) {
this._ids = ids || [];
this._pageCount = 0;
this._nextPageUrl = null;
this._isExpectingPage = false;
}
getIds() {
return this._ids;
}
getPageCount() {
return this._pageCount;
}
isExpectingPage() {
return this._isExpectingPage;
}
getNextPageUrl() {
return this._nextPageUrl;
}
isLastPage() {
return this.getNextPageUrl() === null && this.getPageCount() > 0;
}
prepend(id) {
this._ids = _.union([id], this._ids);
}
remove(id) {
this._ids = _.without(this._ids, id);
}
expectPage() {
invariant(!this._isExpectingPage, 'Cannot call expectPage twice without prior cancelPage or receivePage call.');
this._isExpectingPage = true;
}
cancelPage() {
invariant(this._isExpectingPage, 'Cannot call cancelPage without prior expectPage call.');
this._isExpectingPage = false;
}
receivePage(newIds, nextPageUrl) {
invariant(this._isExpectingPage, 'Cannot call receivePage without prior expectPage call.');
if (newIds.length) {
this._ids = _.union(this._ids, newIds);
}
this._isExpectingPage = false;
this._nextPageUrl = nextPageUrl || null;
this._pageCount++;
}
}
createListStore, createIndexedListStore,createListActionHandler
বয়লারপ্লেট পদ্ধতি এবং অ্যাকশন হ্যান্ডলিং সরবরাহ করে সূচক তালিকাভুক্ত স্টোরগুলি যথাসম্ভব সহজ করে তোলে:
var PROXIED_PAGINATED_LIST_METHODS = [
'getIds', 'getPageCount', 'getNextPageUrl',
'isExpectingPage', 'isLastPage'
];
function createListStoreSpec({ getList, callListMethod }) {
var spec = {
getList: getList
};
PROXIED_PAGINATED_LIST_METHODS.forEach(method => {
spec[method] = function (...args) {
return callListMethod(method, args);
};
});
return spec;
}
/**
* Creates a simple paginated store that represents a global list (e.g. feed).
*/
function createListStore(spec) {
var list = new PaginatedList();
function getList() {
return list;
}
function callListMethod(method, args) {
return list[method].call(list, args);
}
return createStore(
merge(spec, createListStoreSpec({
getList: getList,
callListMethod: callListMethod
}))
);
}
/**
* Creates an indexed paginated store that represents a one-many relationship
* (e.g. user's posts). Expects foreign key ID to be passed as first parameter
* to store methods.
*/
function createIndexedListStore(spec) {
var lists = {};
function getList(id) {
if (!lists[id]) {
lists[id] = new PaginatedList();
}
return lists[id];
}
function callListMethod(method, args) {
var id = args.shift();
if (typeof id === 'undefined') {
throw new Error('Indexed pagination store methods expect ID as first parameter.');
}
var list = getList(id);
return list[method].call(list, args);
}
return createStore(
merge(spec, createListStoreSpec({
getList: getList,
callListMethod: callListMethod
}))
);
}
/**
* Creates a handler that responds to list store pagination actions.
*/
function createListActionHandler(actions) {
var {
request: requestAction,
error: errorAction,
success: successAction,
preload: preloadAction
} = actions;
invariant(requestAction, 'Pass a valid request action.');
invariant(errorAction, 'Pass a valid error action.');
invariant(successAction, 'Pass a valid success action.');
return function (action, list, emitChange) {
switch (action.type) {
case requestAction:
list.expectPage();
emitChange();
break;
case errorAction:
list.cancelPage();
emitChange();
break;
case successAction:
list.receivePage(
action.response.result,
action.response.nextPageUrl
);
emitChange();
break;
}
};
}
var PaginatedStoreUtils = {
createListStore: createListStore,
createIndexedListStore: createIndexedListStore,
createListActionHandler: createListActionHandler
};
একজন mixin যে স্টোর তারা যেমন আগ্রহ দেখিয়েছেন করার জন্য সুর উপাদান পারবেন mixins: [createStoreMixin(UserStore)]।
function createStoreMixin(...stores) {
var StoreMixin = {
getInitialState() {
return this.getStateFromStores(this.props);
},
componentDidMount() {
stores.forEach(store =>
store.addChangeListener(this.handleStoresChanged)
);
this.setState(this.getStateFromStores(this.props));
},
componentWillUnmount() {
stores.forEach(store =>
store.removeChangeListener(this.handleStoresChanged)
);
},
handleStoresChanged() {
if (this.isMounted()) {
this.setState(this.getStateFromStores(this.props));
}
}
};
return StoreMixin;
}
UserListStoreসমস্ত প্রাসঙ্গিক ব্যবহারকারীদের সাথে একটি পন্থা হবে । এবং প্রতিটি ব্যবহারকারীর বর্তমান ব্যবহারকারী প্রোফাইলের সাথে সম্পর্কের বর্ণনা দেওয়ার জন্য বেশ কয়েকটি বুলিয়ান পতাকা থাকবে।{ follower: true, followed: false }যেমন কিছু উদাহরণ। পদ্ধতিগুলিgetFolloweds()এবংgetFollowers()আপনার ইউআইয়ের জন্য প্রয়োজনীয় ব্যবহারকারীদের বিভিন্ন সেট পুনরুদ্ধার করবে।