Search code examples
javascriptreactjsecmascript-6fluxreactjs-flux

react flux actions and store class dependecies


As far as I understand React-Flux architecture, Flux Actions classes should propagate their events to Store classes via AppDispatcher.

However, I saw a few examples were Action classes are getting data directly from a Store class in order to execute some operations...

example:

import ... /* a few more imports */
import AppDispatcher from 'AppDispatcher.js';
import SomeStore from 'SomeStore.js';


class SomeActions {

    processItemData(){
        var item = SomeStore.getCurrentItem();
        .
        .
        // do something with the item
        .
        .
        // then data dispatched (anyway) to SomeStore or maybe other Store class
        AppDispatcher.dispatch({...}); 
    }
}

As I see it - importing here SomeStore.js breaks the Flux architecture and the way the data flows in the app.

The question is, is this normal? isn't it bad practice?


Solution

  • As you thought this is incorrect and breaks the concept of uni-directional data flow. The action could process data provided to it by the component, but I don't see why it would need to, or should, require any data or knowledge from the store.

    This breaks the principle of inversion of control, as the action then needs knowledge of the store's custom implementation, instead of simply dispatching an event with data on it - this is the kind of architecture which flux is trying to avoid!