Redux shim for converting from Fluxxor

connect.jsx

const React = require('react');
const mapValues = require('lodash/object/mapValues');
const createGetState = require('app/redux_shims/create_get_state');
const Fluxxor = require('fluxxor');
const FluxMixin = Fluxxor.FluxMixin(React);
const StoreWatchMixin = Fluxxor.StoreWatchMixin;
const createDispatcher = require('app/redux_shims/create_dispatcher');
const Router = require('react-router');

function bindActionCreator(flux, router, action) {
  const dispatch = (type, payload) => flux.dispatchBinder.dispatch(type, payload);
  const getState = createGetState(flux);

  const actionUtils = {
    getState,
    router
  };

  return createDispatcher(action)(dispatch, actionUtils);
}

function bindActionCreators(flux, router, actions) {
  return mapValues(actions, (action) => bindActionCreator(flux, router, action));
}

function getDisplayName(Component) {
  return Component.displayName || Component.name || 'Component';
}

function createConnector(subscriptions, select, actions, merge, Component) {
  return React.createClass({
    displayName: `${getDisplayName(Component)}Connector`,

    mixins: [FluxMixin, StoreWatchMixin(...subscriptions), Router.State],

    getStateFromFlux() {
      const state = createGetState(this.getFlux())();

      return select(state);
    },

    getComponentProps() {
      const boundActions = bindActionCreators(this.getFlux(), this.context.router, actions);
      return merge(this.state, boundActions, this.props);
    },

    render() {
      const componentProps = this.getComponentProps();
      return <Component {...componentProps} />;
    }
  });
}

module.exports = function connect(
  subscriptions,
  select = (state) => state,
  actions = {},
  merge = (state, actions, props) => ({ ...state, ...props, actions })) {
  return (Component) => createConnector(subscriptions, select, actions, merge, Component);
};

create_dispatcher.js

module.exports = action => (dispatch, actionUtils) => (...args) => {
  const result = action(...args);

  if (!result) {
    return;
  }

  if (typeof result === 'function') {
    return result(dispatch, actionUtils);
  }

  const { type, payload } = result;
  dispatch(type, payload);
};

create_fluxxor_actions.js

const mapValues = require('lodash/object/mapValues');
const createGetState = require('app/redux_shims/create_get_state');
const createDispatcher = require('app/redux_shims/create_dispatcher');
const router = require('app/router');

function createFluxxorAction(action) {
  const dispatcher = createDispatcher(action);

  return function(...args) {
    const actionUtils = {
      router,
      getState: createGetState(this.flux)
    };

    return dispatcher(this.dispatch, actionUtils)(...args);
  };
}

module.exports = function createFluxxorActions(actions) {
  return mapValues(actions, createFluxxorAction);
};

create_get_state.js

module.exports = function createGetState(flux) {
  return () => ({
    get accounts() {
      return flux.store('AccountsStore').getState();
    },
    get appBundle() {
      return flux.store('AppBundleStore').getState();
    }
  });
};

create_reducer_store.js

const Fluxxor = require('fluxxor');
const reduce = require('lodash/collection/reduce');
const { INIT } = require('app/constants');

const INIT_ACTION = {
  type: INIT
};

module.exports = function createReducerStore(reducer) {
  return Fluxxor.createStore({
    initialize() {
      const actionDispatcher = type => payload => {
        const oldState = this.state;
        this.state = reducer(this.state, { type, payload });
        if (this.state !== oldState) {
          this.emit('change');
        }
      };

      const reduceAction = (actions, action) => {
        actions[action] = actionDispatcher(action);
        return actions;
      };

      this.state = reducer(undefined, INIT_ACTION);
      this.__actions__ = reduce(reducer.actions, reduceAction, {});
    },

    getState() {
      return this.state;
    }
  });
};