React JS Best Practices

Re:React JS Best Practices by straws on Saturday May 09, 2015 @12:50PM (#9516888)

Great question! Actions should be thought of as a mapping between some mechanical UI event (typing in a form, clicking on a button) and an event with some meaning in your application ("user typed a hacker news comment", "user submitted a reply to this comment with this text"). Whatever your application data store abstraction is, it should be responsible for taking that meaningful event and figuring out what to do with it (check to see that the message isn't empty, check to see that the comment was persisted to the server).

Actions describe things that happened in the world and the role of your store is to figure out if that thing that happened is valid or not, and pass the necessary data to components listening for changes.

[ Parent | on HN ]

Re:React JS Best Practices by pbowyer on Sunday May 10, 2015 @04:19AM (#9519289)

Thanks for your explanation, that makes sense theoretically but... could you provide a code example for how this breaks out in practice?

[ Parent | on HN ]

Re:React JS Best Practices by yblu on Sunday May 10, 2015 @10:46PM (#9522433)

I guess what s/he meant was having something like this in the store:

  handleComment(comment) { 
    if (comment === '') this.dispatch('comment-error', 'empty')
    else svc.send(comment)
            .then(() => this.dispatch('comment-success')
            .catch(err => this.dispatch('comment-error', err))
  }

The view/controller (or whatever it's called in React) will then listen to the events and set its state accordingly so that the UI can be re-rendered.

It does look quite complicated compared with typical error handling code. Not sure if I misunderstood something or whether this additional layer of message dispatching is worthwhile in most apps.

[ Parent | on HN ]