How to chain actions in purescript (or maybe defer action after rendering)

Question

I'm learning Halogen at the moment but I have a hard time finding how to chain actions. Let's say I have a simple article list component. I also have an "add" button to create a new article to be edited in place in the list.

My approach would be to bind an AddArticle action to the onClick action of the button. In the handleAction function, I'd add a new empty article at the end of the article list model. Then I´d like to scroll to this newly created article. That's where I'm lost. To scroll to this newly created article, I'd have to have a ref to the new article, but it has not been redered yet. So here's the precise question:

How could I chain the two Effects of creating the new article (modify_ the state of the component) and the scrolling to this newly created element ?

I never used Halogen myself, so I'm not sure, but I would try to send another message after, like, a 1ms delay. I'm sure Halogen must have a way to launch async effects that produce messages. — Fyodor Soikin
– Fyodor Soikin, Commented Sep 25, 2022 at 16:39

gb. · Accepted Answer · 2022-09-26 12:20:37Z

2

In Halogen, whenever you modify the state of a component, it immediately re-renders. Halogen doesn't try to do anything clever with batching renders or anything like that, exactly so the behaviour is predictable and reliable for situations like this.

So here, you'd write it the way you described, pretty much:

handleAction = case _ of
  AddArticle -> do
    H.modify_ ?addArticle
    ref <- H.getHTMLElementRef ?refName
    H.liftEffect (?scrollTo ref)

answered Sep 26, 2022 at 12:20

gb.

4,6791 gold badge23 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

amaille Over a year ago

Oh ! That is weird. I'll try it as soon as I can get back on the project. I hadn't even tried it since I believed that HalogenM is a State monad, so threading the state from computation to computation, getting the final state then re-rendering with the render function.

gb. Over a year ago

HalogenM has an instance of MonadState, but it's not actually State or even a transformer stack using StateT. It's a Free-based monad that is interpreted by Halogen's "driver", but that's a whole other can of worms!

Collectives™ on Stack Overflow

How to chain actions in purescript (or maybe defer action after rendering)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related