(注意:我已经使用ES6语法和JSX Harmony选项。)
作为练习,我编写了一个示例Flux应用程序,该应用程序可以浏览Github users
和存储。
它基于fisherwebdev的答案,但也反映了我用于标准化API响应的方法。
我记录了我在学习Flux时尝试过的几种方法。
我试图使其与现实世界保持紧密联系(分页,没有伪造的localStorage API)。
这里有一些我特别感兴趣的地方:
我如何分类商店
我试图避免在其他Flux示例(尤其是在Stores)中看到的某些重复。我发现从逻辑上将商店分为三类非常有用:
内容商店包含所有应用程序实体。具有ID的所有内容都需要自己的内容存储。呈现单个项目的组件会向内容存储请求新数据。
内容存储区从所有服务器操作中收获其对象。例如,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, ...]
索引列表存储类似于列表存储,但是它们定义了一对多关系。例如,“用户的订户”,“存储库的注视者”,“用户的存储库”。他们还处理分页。
他们也通常只有几个动作做出反应(例如REQUEST_USER_REPOS
,REQUEST_USER_REPOS_SUCCESS
,REQUEST_USER_REPOS_ERROR
)。
在大多数社交应用中,您将拥有很多此类应用,并且希望能够快速创建更多此类应用。
// 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]));
}
}
}
存储分页状态并强制执行某些断言(获取时无法获取页面等)。
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()
将检索UI所需的不同用户集。