Hacker News Reader

Comment by yblu | Hacker News Reader

I wonder how everyone takes care of error handling in Flummox (or Flux in general)? Would you also trigger an action, then wait for the store to set some sort of error state?

Basically, how would you migrate the following code to Flux:

  click() { doAction().catch(err => showModal(err)) }

View on HN

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.

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

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.

Reply on news.ycombinator.com