In Flux architecture, how do you manage Store lifecycle?

Question

I\'m reading about Flux but the example Todo app is too simplistic for me to understand some key points.

Imagine a single-page app like Facebook that has use

Answer 1

So in Reflux the concept of the Dispatcher is removed and you only need to think in terms of data flow through actions and stores. I.e.

Actions <-- Store { <-- Another Store } <-- Components

Each arrow here models how the data flow is listened to, which in turn means that the data flows in the opposite direction. The actual figure for data flow is this:

Actions --> Stores --> Components
   ^          |            |
   +----------+------------+

In your use case, if I understood correctly, we need a openUserProfile action that initiates the user profile loading and switching the page and also some posts loading actions that will load posts when the user profile page is opened and during the infinite scroll event. So I'd imagine we have the following data stores in the application:

• A page data store that handles switching pages
• A user profile data store that loads the user profile when the page is opened
• A posts list data store that loads and handles the visible posts

In Reflux you'd set it up like this:

The actions

// Set up the two actions we need for this use case.
var Actions = Reflux.createActions(['openUserProfile', 'loadUserProfile', 'loadInitialPosts', 'loadMorePosts']);

The page store

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);
    }
});

The user profile store

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);
    }
});

The posts store

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');
    }
});

The components

I'm assuming you have a component for the whole page view, the user profile page and the posts list. The following needs to be wired up:

• The buttons that opens up the user profile need to invoke the Action.openUserProfile with the correct id during it's click event.
• The page component should be listening to the currentPageStore so it knows which page to switch to.
• The user profile page component needs to listen to the currentUserProfileStore so it knows what user profile data to show
• The posts list needs to listen to the currentPostsStore to receive the loaded posts
• The infinite scroll event needs to call the Action.loadMorePosts.

And that should be pretty much it.