（注：JSX Harmonyオプションを使用してES6構文を使用しました。）
演習として、閲覧とリポジトリ作成を可能にするサンプルFluxアプリを作成しましたGithub users。
これはfisherwebdevの回答に基づいていますが、API応答の正規化に使用するアプローチも反映しています。
Fluxの学習中に試したいくつかのアプローチを文書化するために作成しました。
私はそれを現実の世界に近づけようとしました（ページネーション、偽のlocalStorage APIはありません）。
ここに私が特に興味を持ったいくつかのビットがあります：
ストアの分類方法
他のFluxの例、特にストアで見られた重複のいくつかを回避しようとしました。ストアを論理的に3つのカテゴリに分類すると便利だと思いました。
Content Storeはすべてのアプリエンティティを保持します。IDを持つすべてのものには、独自のコンテンツストアが必要です。個々のアイテムをレンダリングするコンポーネントは、コンテンツストアに最新のデータを要求します。
Content Storeは、すべてのサーバーアクションからオブジェクトを取得します。たとえば、UserStore に見えますaction.response.entities.usersが存在する場合にかかわらず、アクションが解雇されました。の必要はありませんswitch。Normalizrを使用すると、この形式に対するAPI応答を簡単にフラット化できます。
// Content Stores keep their data like this
{
7: {
id: 7,
name: 'Dan'
},
...
}
リストストアは、いくつかのグローバルリストに表示されるエンティティのID（「フィード」、「通知」など）を追跡します。今回のプロジェクトではそういうお店はありませんが、とにかくお店に言及したいと思いました。彼らはページネーションを扱います。
彼らは通常、（例えば、ほんの数操作に反応しREQUEST_FEED、REQUEST_FEED_SUCCESS、REQUEST_FEED_ERROR）。
// Paginated Stores keep their data like this
[7, 10, 5, ...]
インデックス付きリストストアはリストストアに似ていますが、1対多の関係を定義します。たとえば、「ユーザーのサブスクライバー」、「リポジトリのスターゲイザー」、「ユーザーのリポジトリ」などです。また、ページネーションも処理します。
彼らはまた、通常、（例えば、ほんの数操作に反応しREQUEST_USER_REPOS、REQUEST_USER_REPOS_SUCCESS、REQUEST_USER_REPOS_ERROR）。
ほとんどのソーシャルアプリでは、これらのアプリがたくさんあり、それらをすばやくもう1つ作成できるようにしたいと考えています。
// 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
Content Storeに役立つ小さなヘルパー。
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]));
}
}
}
ページネーションの状態を保存し、特定のアサーションを適用します（フェッチ中にページをフェッチすることはできません）。
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
};
コンポーネントが関心のあるストアにチューニングできるようにするミックスイン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()は、UIに必要なさまざまなユーザーセットを取得します。