channelizer v1.5.1

Channelizer

Channelizer lets you combine the power of Flux Dispatchers and Reducers within a message queuing interface. Channelizer can be used as both a Store and a Dispatcher.

Take for instance the following (slightly altered) example written by Facebook

// TodoDispatcher.js
import {Dispatcher} from 'flux';

const instance = new Dispatcher();
export default instance;

export const dispatch = instance.dispatch.bind(instance);

// TodoStore.js
import Immutable from 'immutable';
import {ReduceStore} from 'flux/utils';
import TodoDispatcher from './TodoDispatcher';

class TodoStore extends ReduceStore {
  getInitialState() {
    return Immutable.OrderedMap();
  }

  reduce (state, action) {
    switch (action.type) {

      case 'todo/complete':
        return state.setIn([action.id, 'complete'], true);

      case 'todo/destroy':
        return state.delete(action.id);

      default:
        return state;
    }
  }
}
const instance = new TodoStore(TodoDispatcher);
export default instance;

This can be simplified...

// TodoChannels.js
// Combines the functionality of TodoDispatcher and TodoStore
import Immutable from 'immutable';
import { Channelizer } from 'channelizer';

class TodoChannels extends Channelizer {
  Model() {
    return Immutable.OrderedMap();
  }

  Channels({ receiver }) {

    receiver.world({
      prefix: 'todo/',
      controller: ({ receiver }) => {

      receiver.tune({
        channel: 'complete',
        controller: ({state, incoming}) => state.setIn([incoming.id, 'complete'], true)
      });

      receiver.tune({
        channel: 'destroy',
        controller: ({state, incoming}) => state.delete(incoming.id)
      });

    }});
  }
}
const instance = new TodoChannels();
export default instance;

Dispatch and Store functionality

import TodoChannels from './TodoChannels';
import { Component } from 'react';

class MyComponent extends Component {
	// If you want to use TodoChannel as a store
	// It's just like you expect
	static function getStores() {
		return [TodoChannels]
	}

	function markAsCommplete(id) {
		// Note we're accessing the TodoChannels store dispatcher.
		// We specify the channel as a string and place all data in "outgoing"
		// Outgoing is then sent to the channel controller as "incoming"
		TodoChannels.dispatch({
			channel: 'todo/complete',
			outgoing: { id }
		});
	}
}