State Mixin for Stores

[jehoshua02]

This is what I'm doing for state in stores:

var update = require('react/addons').addons.update;


var State = {
  init: function () {
    this.state = this.getInitialState();
  },

  setState: function (state) {
    this.state = update(this.state, {$merge: state});
    this.trigger(state);
  }
};


module.exports = State;

Then I use it like so in my Store:

var Reflux = require('reflux');
var Actions = require('../actions');
var State = require('./mixins/State');
var firebase = require('../util/firebase').child('requirements');


var RequirementStore = Reflux.createStore({
  mixins: [State],

  getInitialState: function () {
    return {
      requirements: []
    };
  },

  listenables: {
    save: Actions.REQUIREMENT_SAVE,
    sync: Actions.REQUIREMENT_SYNC
  },

  init: function () {
    firebase.on('value', Actions.REQUIREMENT_SYNC);
  },

  onSave: function (requirement) {
    firebase.push(requirement);
    this.setState({
      requirements: this.state.requirements.concat(requirement)
    });
  },

  onSync: function (snapshot) {
    var requirements = snapshot.val();
    if (!requirements) { return; }
    this.setState({
      requirements: requirements
    });
  }
});


module.exports = RequirementStore;

But I'm totally new. So maybe I don't understand the architectural concerns or missed some state mixin already in Reflux.

If this is a good feature maybe absorb it into Reflux?

[zkilgore]

I don't have an opinion on baking this into the library, but I will say I really like this pattern. Am going to put it into practice in some of my stores today. Nice idea and thanks for sharing!

[spoike]

I'm starting to lean towards adding a state to stores, though my requirements would be to have a way to do it with an immutable map. The best way would be to use a lib for immutable data structures, though this goes against having the library as dependency free as possible.

So for now, you can mixin this for yourself... or if anyone is kind enough, provide an npm/bower module for this.

[yonatanmn]

npm (with additional way of use)