具有多个独立的 FLUX stores/dispatchers

Question

我正在使用 React 和 Flux/McFly 构建一个应用程序并且想要独立商店，但我的 McFly 操作被传递到我用 mcFly 创建的每个商店 - 尽管我使用单独的文件导入 mcFly 实例

/stores/msg/mcfly.js:

var McFly           = require('mcfly');
,   MsgDispatcher   = new McFly()
;
module.exports = MsgDispatcher;

/stores/user/mcfly.js:

var McFly       = require('mcfly')
,   UserMcFly   = new McFly()
;
module.exports = UserMcFly;

所以这应该是不同的实例，对吧？但是他们的调度员好像是一样的
（？因为'flux'调度员总是单身？）

当我用不同的 McFly "instances" 创建 不同的 Stores/ActionCreator-Pairs 时 每个动作仍然通过每个商店 。
我知道很多人建议只有一个全局 State/Store，但恕我直言，这种方法并不适合每个项目，我讨厌这种行为。

TL;DR:
是否可以创建完全独立的 Stores/Dispatchers
或者它是这样设计的吗？为什么？
缺点： 糟糕的性能，非常大的 StateObject，如果不需要则检查更新，独立的 SubApps 不可能？，数据模型的特殊化，...

如果不能有单独的 Store/Dispatcher，我如何创建独立的可重复使用的独立子应用程序？

此致，史蒂夫

Answer 1

为什么操作在所有商店都可用是个问题？您可以在每个商店中使用一个开关来捕获您对该商店感兴趣的操作。有时您实际上想在多个商店中收听相同的动作。

Answer 2

非常感谢@Janaka Stevens
我将组件的 onChange-callback 添加到 Store 并在需要时手动触发它：

Thread.react.js

import React        from 'react';
import MsgStore     from '../stores/msg/MsgStore';
export default React.createClass({
        getInitialState:    function() {
            // returns the _msg object located in the MsgStore closure
            return MsgStore.getState()
        }   
    ,   onChange: function() {
            // i don't think that's the right way but it works
            this.setState(MsgStore.getState());
        }
    // better than the mcFly mixin for multiple stores
    // so you have more control to which store your component listens
    ,   componentDidMount: function() {
            MsgStore.on('change', this.onChange);
        }
        [ ... ]
    )
;

MsgStore

import React            from 'react';
import {MsgMcFly}       from './mcfly';
import {MsgReducers}    from './MsgReducers';
import combineReducers  from 'mcfly-combinereducers';
let combinedReducers    = combineReducers(MsgReducers)
// get _msgs per API | from DB
,   _msgs               = [
        {id: 0, txt: 'test0', user: 'steve23'}
    ,   {id: 1, txt: 'test1', user: 'steve23'}
    ,   {id: 2, txt: 'test2', user: 'steve23'}
    ]
;
export default MsgMcFly.createStore({
        getMsgs:    function(){ return _msgs; }
    ,   getState:   function(){ return {'msgs': _msgs} }
    ,   createMsgObject:    function(msg) {
            return {
                id:         _msgs.length // dev
            ,   txt:        msg.txt
            ,   timestamp:  msg.timestamp || new Date()
            ,   user:       msg.user || 'steve' // dev
            }
        }
    },  function(action) {

            // prevent the Store to fire for 'USER_' actions
            if(action.type.substr(0, 3) !== 'MSG')
                return false;

            combinedReducers(MsgStore.getMsgs(), action);

            MsgStore.emitChange();
            return true;
        }
    )
;

具有多个独立的 FLUX stores/dispatchers

FLUX with multiple independent stores/dispatchers

flux

reactjs

reactjs-flux