Communicating between components about deku HOT 3 CLOSED

However, this could break if you happened to drop in another component that listened for the same event. Maybe it would be best to just use actions and stores for this.

from deku.

I'm +1 on using stores/actions to communicate state. With React passing this to child components has worked pretty well for tiny parts, where stores/actions are good at orchestrating the larger moving parts.

from deku.

We ended up going with a concept called channels. This allows a flux-like interface for components. I'll be adding some docs for this soon.

var List = component()
  .channel('todos');

List.prototype.beforeMount = function(props, state) {
   var self = this;
   props.channels.todos.on('change', function(todos){
     self.setState('todos', todos);
   });
}; 

List.prototype.render = function(props, state) {
   return dom('ul', state.todos.map(function(todo){
      return dom('li', todo.name);
   }));
}; 

var scene = List.render(document.body);

// Create the channel
var channel = scene.channel('todos');

// Whenever a component connects to this channel we
// can send data to it. These will automatically get cleaned up.
channel.on('connection', function(socket){
  api.todos.on('change', function(todos){
    socket.emit('change', todos);
  });
});

The components are still dumb and don't care where they get data from. The socket that gets passed into props.channels.todos is just an event emitter. So it's easy to fake in tests. I'm still seeing if this is a good solution but it's pretty decoupled.

from deku.