FLUX with multiple independent stores/dispatchers

Question

I'm building a App with React and Flux/McFly and want to have to INDEPENDENT Stores but my McFly Actions are passed to EVERY Store i created with mcFly - despite i use seperate files to import the mcFly Instance

/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;

so this should be different instances, right? But their dispatchers seems to be the same.
(?because 'flux' dispatcher is always singleton?)

When i create different Stores/ActionCreator-Pairs with different McFly "instances" every Action still goes through EVERY STORE.
i know that many people suggests to have just ONE global State/Store, but imho that approach doesn't fits to every project and i hate that behavior.

TL;DR:
Is It possible to create completely INDEPENDENT Stores/Dispatchers
or is it intended that way and WHY?
CONS: bad performance, REALLY big StateObject, checking for Updates if it isn't neccessary, Standalone SubApps not possible?, spezification of DataModels, ...

How do i create independent reuseable standalone Sub-Applications if can't have a seperated Store/Dispatcher?

best regards, Steve

misunderstood the store-reducer - concept... question does not make sense... should be deleted — DoubleU23, Feb 15 '16 at 12:59

score 2 · Accepted Answer · answered Nov 03 '15 at 18:27

2

Why is it an issue that the actions are available in all stores? You can use a switch in each store to capture the actions you are interested in for that store. Sometimes you actually want to listen to the same action in multiple stores.

answered Nov 03 '15 at 18:27

J. Mark Stevens

4,911
2
13
18

the problem was, that the 'shoulUpdate' method (in the mixin) fired because the Store is emitting the change event even if the Stores-State didn't change. This wouln'd be a Problem if my 'shouldComponentUpdate' method's nextState wouldn't be equal to the actual state... ( it's my first react/flux project ) I catched that changeevent by testing if the state changed. but that is just a (bad?) workaround – DoubleU23 Nov 04 '15 at 16:08
1

Maybe it is the mixin then. The store should not fire an update just because an action is triggered. Try the alternate method of listening to the store set in componentDidMount. – J. Mark Stevens Nov 04 '15 at 16:31
Indeed having a singleton dispatcher is the main idea behind the flux pattern. – Constantin Oct 27 '20 at 06:49

DoubleU23 · Answer 2 · 2015-11-04T21:26:48.747

big thx @Janaka Stevens
i added the Component's onChange-callback to the Store and fire it manually if needed:

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 with multiple independent stores/dispatchers

2 Answers2