Listen to stores outside of the view layer in a Flux application

What I'm going to demonstrate today is more of an interesting concept than a technical achievement. Have you ever wanted to respond to store data changes in your Flux application, but in a way that is totally unrelated to, say, React?

Well, you probably already have some components doing it, so it shouldn't be hard. Let's try it out by saying we would like to do something upon authentication when the app boots:

// src/listeners/loginListener.js

'use strict';



let userStore = require('../stores/userStore');



module.exports = userStore.addChangeListener.bind(

    userStore,

    function() {

        let user = userStore.getUser();

        console.log(user);

    }

);

Binding is pretty easy, too; just do something like the following in your entry point:

// src/app.js

require('./listeners/loginListener')();

Repeating this pattern brings you a basic form of standalone store event listeners that you can use throughout your app, avoiding polluting view components with stuff that doesn't really belong in them.