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
``js
// TodoDispatcher.js
import {Dispatcher} from 'flux';

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

export const dispatch = instance.dispatch.bind(instance);
`
`js
// 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...
`js
// 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;
`

$3


`js
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 }
});
}
}
``