impact icon indicating copy to clipboard operation
impact copied to clipboard

Naming a concept represented by the `effect`

Open dpraimeyuu opened this issue 1 year ago • 4 comments

Hi @christianalfoni 😅

I was wondering about the naming (and expressing ideas/concepts/abstractions):

effect(() => { // 👈 we are expressing something happening when some specific fact/event happens
        if (todos.remaining === 10) {
            notifications.add({ type: 'warning', text: "Oh oh, make sure you keep sane!" })
        }
    })

Should effect sound a little more "actionable"?

  • runEffect?
  • reaction?
  • reactWith?
  • reactTo?

Additionally, the signature of effect is:

type EffectHandler = () => void
type EffectCleanUp = () => void
type Effect = EffectHandler => EffectCleanUp 

I wonder if it makes sense to have similar to Overmind.js's Reaction - where dependencies are explicitly passed?

It helps readability and understanding what is actually "observed" 🤔

So it would become:

effect([todos.remaining], (remainingTodos) => { // 👈 expressing observables explicitly
        if (remainingTodos === 10) {
            notifications.add({ type: 'warning', text: "Oh oh, make sure you keep sane!" })
        }
    })

Or even a super verbose version, enabling testing :-P 😅

const createWarningAboutHyperProductivity = (notifications) => ([remainingTodos]) => {
	if (remainingTodos === 10) {
        notifications.add({ type: 'warning', text: "Oh oh, make sure you keep sane!" })
    }
}

const warningAboutHyperProductivity = createWarningAboutHyperProductivity(notifications)

react({ with: warningAboutHyperProductivity, to: [todos.remaining] })

Thanks for your inspiring work, as always 🙏

dpraimeyuu avatar Jan 04 '24 10:01 dpraimeyuu