0

I'm playing around with fb's tutorial on comment box. Let's imagine I've added functionality to delete comments, so I will have something like this in Comment component - 

onClick={this.handleCommentDelete}

How do I trigger change of the state of the commentBox parent component without propagating callback throughout commentList component and then to comment component?

<commentBox>
  <commentList>
    <comment>
Leg0
  • 510
  • 9
  • 21
  • 3
    Flux architecture is one way of doing this. Call a `ActionCreators.deleteComment` action in `this.handleCommentDelete`. `Dispatcher` dispatches it to all stores. `CommentStore` acts upon the action by deleting the comment and emits change event. `CommentBox` which is listening to the `CommentStore` updates itself with the new list of comments. – nilgun Feb 21 '15 at 21:48
  • 1
    It's partly a question of what component actually "owns" the act of deleting the comment. Is it the base level `Comment` component? Or some container that does? Events are a very efficient and extremely clear way of transmitting state through a parent chain and establishes a clear owner. You might then use the Flux pattern ... – WiredPrairie Feb 21 '15 at 22:18

1 Answers1

0

I am using PubSub pattern to communicate between components. In commentBox:

componentDidMount: function() {
    PubSub.subscribe("COMMENT_DELETED", function( msg, data ){
        console.log( data ); //logs "commentId"
    });
}

In handleCommentDelete:

PubSub.publish("COMMENT_DELETED", {commentId: commentId});

For PubSub I am using this library (but there are others of course): https://www.npmjs.com/package/pubsub-js.

SM79
  • 1,234
  • 2
  • 15
  • 33