Adopting a Command Pattern for Managing Effects and Side Effects in Vue and React
We recently started adopting a Command pattern, which encompasses everything that should happen from the moment the user clicks a button, provides result/waiting status and has some tools built in for translating the action name and button label, which is also used for some basic toast feedback to the user (in progress / success / failure).
it borrows some ideas from Atom, and we're still evaluating how we can make Atom the core of this for us.
One of the main design goals of this was not to go in and out of effect within a single execution, so effect and side effect are connected, and error handling, reporting to us/user, can all be reasoned about and managed linearly, to limit subtle bugs on callback spaghetti, disparate tracing spans, having to call
I would be interested to see how other people deal with side effects in Atom.
closing a dialog, routing to a different page, doing other kind of follow ups.
We're a Vue shop, but the core principals should apply to React too, with the main difference being that in Vue you have an explicit setup section that is not ran on render, but only on creation, so you don't need to do so much hook gymnastics to get stable references etc.
https://gist.github.com/patroza/253709fccb7e1e018db09a59aeb6abe5
our tracing basically looks like:
it borrows some ideas from Atom, and we're still evaluating how we can make Atom the core of this for us.
One of the main design goals of this was not to go in and out of effect within a single execution, so effect and side effect are connected, and error handling, reporting to us/user, can all be reasoned about and managed linearly, to limit subtle bugs on callback spaghetti, disparate tracing spans, having to call
run at different places (or combining multiple commands via .handle() or Atom's set() )I would be interested to see how other people deal with side effects in Atom.
closing a dialog, routing to a different page, doing other kind of follow ups.
We're a Vue shop, but the core principals should apply to React too, with the main difference being that in Vue you have an explicit setup section that is not ran on render, but only on creation, so you don't need to do so much hook gymnastics to get stable references etc.
https://gist.github.com/patroza/253709fccb7e1e018db09a59aeb6abe5
our tracing basically looks like:
