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