我正在阅读有关Flux的信息，但Todo 应用程序示例过于简单，我无法理解一些关键点。
想象一个像 Facebook 这样的单页应用程序，它有用户个人资料页面。在每个用户个人资料页面上，我们希望无限滚动显示一些用户信息和他们最近的帖子。我们可以从一个用户配置文件导航到另一个用户配置文件。
在 Flux 架构中，这将如何对应于 Stores 和 Dispatchers？
我们会为每个用户使用一个PostStore，还是我们会拥有某种全球商店？那么调度程序呢，我们会为每个“用户页面”创建一个新的调度程序，还是使用单例？最后，架构的哪一部分负责管理“特定于页面”的 Store 的生命周期以响应路由更改？
此外，一个伪页面可能有多个相同类型的数据列表。例如，在个人资料页面上，我想同时显示Followers和Follows。在这种情况下，单例如何UserStore工作？会UserPageStore管理followedBy: UserStore和follows: UserStore？
在 Flux 应用中应该只有一个 Dispatcher。所有数据都流经这个中心枢纽。拥有一个单例 Dispatcher 允许它管理所有 Store。当您需要 Store #1 更新自身，然后让 Store #2 根据 Action 和 Store #1 的状态更新自身时，这一点变得很重要。Flux 假设这种情况是大型应用程序中的一种可能性。理想情况下，这种情况不需要发生，如果可能，开发人员应该努力避免这种复杂性。但是单例 Dispatcher 已准备好在时机成熟时处理它。
商店也是单身人士。它们应该尽可能保持独立和解耦——一个可以从控制器视图查询的自包含宇宙。进入 Store 的唯一途径是通过它向 Dispatcher 注册的回调。唯一的出路是通过 getter 函数。当状态发生变化时，Stores 也会发布一个事件，因此 Controller-Views 可以知道何时使用 getter 查询新状态。
在您的示例应用程序中，将有一个PostStore. 这家商店可以管理“页面”（伪页面）上的帖子，这更像是 FB 的新闻提要，帖子来自不同的用户。它的逻辑域是帖子列表，它可以处理任何帖子列表。当我们从伪页面移动到伪页面时，我们希望重新初始化商店的状态以反映新的状态。我们可能还想在 localStorage 中缓存以前的状态，作为在伪页面之间来回移动的优化，但我的倾向是设置一个PageStore等待所有其他存储的，管理与 localStorage 的关系以用于所有存储伪页面，然后更新自己的状态。请注意，这PageStore不会存储任何关于帖子的内容——这是PostStore. 它只会知道一个特定的伪页面是否已被缓存，因为伪页面是它的域。
PostStore会有一个initialize()方法。这个方法总是会清除旧状态，即使这是第一次初始化，然后根据它通过 Dispatcher 通过 Action 接收到的数据创建状态。从一个伪页面移动到另一个可能会涉及一个PAGE_UPDATE动作，这将触发initialize(). 关于从本地缓存中检索数据、从服务器检索数据、乐观渲染和 XHR 错误状态，有一些细节需要解决，但这是大体思路。
如果一个特定的伪页面不需要应用程序中的所有商店，我不完全确定除了内存限制之外有任何理由销毁未使用的商店。但是存储通常不会消耗大量内存。您只需要确保删除要销毁的控制器视图中的事件侦听器。这是在 React 的componentWillUnmount()方法中完成的。
（注意：我使用了 ES6 语法和 JSX Harmony 选项。）
作为练习，我编写了一个允许浏览和回购的示例 Flux 应用程序。
它基于fisherwebdev 的回答，但也反映了我用于规范化 API 响应的方法。Github users
我记录了一些我在学习 Flux 时尝试过的方法。
我试图让它接近现实世界（分页，没有虚假的 localStorage API）。
这里有几点我特别感兴趣：
switch有行动的巨人；我试图避免在其他 Flux 示例中看到的一些重复，特别是在 Stores 中。我发现在逻辑上将 Store 分为三类很有用：
内容商店拥有所有应用实体。任何有 ID 的东西都需要有自己的 Content Store。呈现单个项目的组件向内容存储请求新数据。
内容存储从所有服务器操作中获取其对象。例如，不管触发了哪个动作，UserStore 都会action.response.entities.users检查它是否存在。不需要. Normalizr可以轻松地将任何 API 响应扁平化为这种格式。switch
// 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, ...],
...
}
注意：这些不是实际的课程或其他东西；这就是我喜欢思考商店的方式。不过我做了一些帮手。
StoreUtilscreateStore这个方法给你最基本的Store：
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]));
}
}
}
PaginatedList存储分页状态并强制执行某些断言（在获取时无法获取页面等）。
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++;
}
}
PaginatedStoreUtilscreateListStore, 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
};
createStoreMixin允许组件调入他们感兴趣的 Store 的 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;
}
所以在Reflux中，Dispatcher 的概念被移除了，你只需要考虑通过动作和存储的数据流。IE
Actions <-- Store { <-- Another Store } <-- Components
这里的每个箭头都模拟了数据流是如何被监听的，这反过来意味着数据流向相反的方向。数据流的实际数字是这样的：
Actions --> Stores --> Components
^ | |
+----------+------------+
在您的用例中，如果我理解正确，我们需要一个openUserProfile启动用户配置文件加载和切换页面的操作，以及一些帖子加载操作，这些操作将在打开用户配置文件页面和无限滚动事件期间加载帖子。所以我想我们在应用程序中有以下数据存储：
在 Reflux 中，您可以这样设置：
// Set up the two actions we need for this use case.
var Actions = Reflux.createActions(['openUserProfile', 'loadUserProfile', 'loadInitialPosts', 'loadMorePosts']);
var currentPageStore = Reflux.createStore({
init: function() {
this.listenTo(openUserProfile, this.openUserProfileCallback);
},
// We are assuming that the action is invoked with a profileid
openUserProfileCallback: function(userProfileId) {
// Trigger to the page handling component to open the user profile
this.trigger('user profile');
// Invoke the following action with the loaded the user profile
Actions.loadUserProfile(userProfileId);
}
});
var currentUserProfileStore = Reflux.createStore({
init: function() {
this.listenTo(Actions.loadUserProfile, this.switchToUser);
},
switchToUser: function(userProfileId) {
// Do some ajaxy stuff then with the loaded user profile
// trigger the stores internal change event with it
this.trigger(userProfile);
}
});
var currentPostsStore = Reflux.createStore({
init: function() {
// for initial posts loading by listening to when the
// user profile store changes
this.listenTo(currentUserProfileStore, this.loadInitialPostsFor);
// for infinite posts loading
this.listenTo(Actions.loadMorePosts, this.loadMorePosts);
},
loadInitialPostsFor: function(userProfile) {
this.currentUserProfile = userProfile;
// Do some ajax stuff here to fetch the initial posts then send
// them through the change event
this.trigger(postData, 'initial');
},
loadMorePosts: function() {
// Do some ajaxy stuff to fetch more posts then send them through
// the change event
this.trigger(postData, 'more');
}
});
我假设您有一个用于整个页面视图、用户个人资料页面和帖子列表的组件。需要连接以下内容：
Action.openUserProfile在单击事件期间使用正确的 id 调用。currentPageStore所以它知道要切换到哪个页面。currentUserProfileStore因此它知道要显示哪些用户个人资料数据currentPostsStore接收加载的帖子Action.loadMorePosts.这应该差不多了。