Fluxomorph

Introduction:

Minimal Isomorphic Flux Implementation. Still WIP. Made both out of need and for educational purposes. Full example of usage can be seen in fluxity-starter-auth.

Install:

npm install fluxomorph --save

Usage:

Create a flux instance with actions and stores using only the constructor.

var Flux = require('fluxomorph');
 
var myFlux = Flux({
  Stores: {
    myStore: {
      getInitialState: function() {
        return {
          hello: 'world',
          age: 28
        };
      },
      handlers: {
        'MY_ACTION_EVENT': function(context, payload) {
          this.setState(payload);
        },
        'MY_OTHER_ACTION_EVENT': function(context, payload) {
          this.replaceState(payload);
        }
      }
    }
  },
  Actions: {
    myAction: function(context, payload, done) {
      context.Dispatcher.emit('MY_ACTION_EVENT', payload);
    },
    myOtherAction: function(context, payload, done) {
      context.Dispatcher.emit('MY_OTHER_ACTION_EVENT', payload);
    }
  }
});

Create a flux instance with actions and stores using the constructor and register methods.

var Flux = require('fluxomorph');
 
var myFlux = Flux();
 
myFlux.registerStore('myStore', {
  getInitialState: function() {
    return {
      hello: 'world',
      age: 28
    };
  },
  handlers: {
    'MY_ACTION_EVENT': function(context, payload) {
      this.setState(payload);
    },
    'MY_OTHER_ACTION_EVENT': function(context, payload) {
      this.replaceState(payload);
    }
  }
});
 
myFlux.registerAction('myAction', function(context, payload, done) {
  context.Dispatcher.emit('MY_ACTION_EVENT', payload);
});
 
myFlux.registerAction('myOtherAction', function(context, payload, done) {
  context.Dispatcher.emit('MY_OTHER_ACTION_EVENT', payload);
});

Using custom setState, replaceState and getState methods for stores. This enables you to use your favorite immutable data structures.

var Flux = require('fluxomorph');
 
var myFlux = Flux();
 
myFlux.registerStore('myStore', {
  getInitialState: function() {
    return {
      hello: 'world',
      age: 28
    };
  },
  setState: function(emitUpdate, newState) {
    this.state = assign(this.state, newState);
    emitUpdate();
  },
  replaceState: function(emitUpdate, newState) {
    this.state = assign({}, newState);
    emitUpdate();
  },
  getState: function() {
    return assign(Array.isArray(this.state) ? [] : {}, this.state);
  },
  handlers: {
    'MY_ACTION_EVENT': function(context, payload) {
      this.setState(payload);
    },
    'MY_OTHER_ACTION_EVENT': function(context, payload) {
      this.replaceState(payload);
    }
  }
});

Adding stuff to the context, making it available to the actions.

var Flux = require('fluxomorph');
 
var myFlux = Flux();
 
myFlux.registerStore('myStore', {
  getInitialState: function() {
    return {
      hello: 'world',
      age: 28
    };
  },
  setState: function(emitUpdate, newState) {
    this.state = assign(this.state, newState);
    emitUpdate();
  },
  replaceState: function(emitUpdate, newState) {
    this.state = assign({}, newState);
    emitUpdate();
  },
  getState: function() {
    return assign(Array.isArray(this.state) ? [] : {}, this.state);
  },
  handlers: {
    'MY_ACTION_EVENT': function(context, payload) {
      this.setState(payload);
    },
    'MY_OTHER_ACTION_EVENT': function(context, payload) {
      this.replaceState(payload);
    }
  }
});
 
myFlux.addToContext('api', {
  signIn: function() {}
});
 
myFlux.addToContext('router', {
  redirect: function() {}
});
 
// inside action handlers you now have context.api and context.router

Listening for updates in stores

myFlux.Stores.myStore.on('change', function() {
  console.log('updated state:', myFlux.Stores.myStore.getState());
});
 
var currentState = myFlux.Stores.myStore.getState();
console.log('initial state:', currentState);
 
myFlux.Actions.myAction({
  age: 50
});

Dehydration / rehydration (pull all state out of the stores in your instance for serialization / initialization)

var Flux = require('fluxomorph');
 
var filledStoreDefinitions = {
  myStore: {
    getInitialState: function() {
      return {
        hello: 'world',
        age: 28
      };
    }
  },
  myOtherStore: {
    getInitialState: function() {
      return [
        'hello',
        'goodbye'
      ];
    }
  }
};
 
var emptyStoreDefinitions = {
  myStore: {
    getInitialState: function() {
      return {};
    }
  },
  myOtherStore: {
    getInitialState: function() {
      return [];
    }
  }
};
 
var myFlux = Flux({
  Stores: filledStoreDefinitions
});
 
var filledAppState = myFlux.dehydrate();
console.log(filledAppState);
/*
{
  myStore: {
    hello: 'world',
    age: 28
  },
  myOtherStore: [
    'hello',
    goodbye
  ]
}
*/
 
var myOtherFlux = Flux({
  Stores: emptyStoreDefinitions
});
 
var emptyAppState = myOtherFlux.dehydrate();
console.log(emptyAppState);
/*
{
  myStore: {},
  myOtherStore: []
}
*/
 
myOtherFlux.rehydrate(filledAppState);
 
var rehydratedAppState = myOtherFlux.dehydrate();
console.log(rehydratedAppState);
/*
{
  myStore: {
    hello: 'world',
    age: 28
  },
  myOtherStore: [
    'hello',
    goodbye
  ]
}
*/

Attach handlers to eventEmitters/sockets (wip - there is still some work to be done here to have proper cleanup)

// socket in this case might be a socket.io/ws connection or just an any event emitter
// following the eventEmitter.on('eventName', function handler() {...}) pattern
 
myFlux.registerSocketActor(socket, 'some-event', function(context, payload) {
  // call an action
  context.Actions.myAction(payload);
  // or alternatively dispatch a message to a store directly
  // context.Dispatcher.emit('MY_ACTION_EVENT', payload);
});
 
myFlux.registerSocketActor(socket, 'some-other-event', function(context, payload) {
  // call an action
  context.Actions.myOtherAction(payload);
  // or alternatively dispatch a message to a store directly
  // context.Dispatcher.emit('MY_OTHER_ACTION_EVENT', payload);
});

Getting the context of your flux instance (which you might want to pass to another mechanism - e.g your router)

var context = myFlux.getContext();
 
// now you have access to context.Stores, context.Actions and context.Dispatcher

React state mixin (example using react-router and child context).

'use strict';
 
var React = require('react');
var Router = require('react-router');
var RouteHandler = Router.RouteHandler;
var Flux = require('fluxomorph');
 
var storeDefinitions = require('../store-defs');
var actionDefinitions = require('../action-defs');
 
var App = React.createClass({
  mixins: [Flux.StateMixin('flux')],
 
  childContextTypes: {
    flux: React.PropTypes.object.isRequired,
    routerState: React.PropTypes.object.isRequired
  },
 
  propTypes: {
    flux: React.PropTypes.any,
    routerState: React.PropTypes.object
  },
 
  getChildContext: function() {
    return {
      flux: this.props.flux,
      routerState: this.props.routerState
    };
  },
 
  render: function() {
    return (
      <RouteHandler
        state={this.state}
      />
    );
  }
});
 
var router = Router.create({...});
 
var flux = Flux({
  Stores: storeDefinitions,
  Actions: actionDefinitions
})
 
flux.addToContext('router', router);
 
router.run(function(Handler, routerState) {
  React.render(
    <Handler
      flux={flux.getContext()}
      routerState={routerState}
    />,
    document.body
  );
});
 
/*
this.state in the react component will have the form:
 
{
  Stores: {
    myStore: {...},
    myOtherStore: {...}
  }
}
 
 */

fluxomorph

Fluxomorph

Introduction:

Install:

Usage:

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Last publish

Collaborators

fluxomorph

Fluxomorph

Introduction:

Install:

Usage:

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Last publish

Collaborators

Weekly Downloads