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;

所以这应该是不同的实例，对吗？但他们的调度员似乎是一样的（？因为＆＃39; flux＆＃39;调度员总是单身？）

当我用不同的McFly＆＃34;实例＆＃34;创建不同的商店/ ActionCreator-Pairs 时每个行动仍然经历每个商店 我知道很多人建议只有一个全球州/商店，但是这种方法并不适合每个项目，我讨厌这种行为。

TL; DR：
是否有可能创建完全独立的商店/调度员或者它的意图是什么？为什么？ 缺点：糟糕的性能，非常大的StateObject，如果不是必要的话，检查更新，不能使用独立的子应用程序？，DataModels的设置，......

如果无法建立独立的商店/调度员，我如何创建独立的可重复使用的独立子应用程序？

最好的问候，史蒂夫

Answer 1

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

Answer 2

大thx @Janaka Stevens
我将组件的onChange回调添加到商店并在需要时手动启动它：

<强> 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与多个独立商店/调度员

2 个答案: