Fork me on GitHub
#re-frame
<
2022-09-16
>
popeye17:09:42

when to use below format

[:div 
 ...]
and
(fn []
  [:div .. ])     

Daniel Craig20:09:07

The below looks like a form-2 component to me.

Daniel Craig20:09:28

This example is taken from the tutorial:

(defn timer-component []
  (let [seconds-elapsed (reagent/atom 0)]     ;; setup, and local state
    (fn []        ;; inner, render function is returned
      (js/setTimeout #(swap! seconds-elapsed inc) 1000)
      [:div "Seconds Elapsed: " @seconds-elapsed])))

Here timer-component is the outer function, and it returns an inner, anonymous render function which closes over the initialised, local state seconds-elapsed.

As before, the job of the render function is to turn data into HTML. That's the backbone. Its just that Form-2 allows your renderer to close over some state created and initialised by the outer.

Daniel Craig20:09:11

I'm kind of a noob so I can't really explain it in my own words, but this is from the documentation

popeye04:09:10

@USDPTD3FY, Thanks for the response, What happens when we not define function? Does that give same result ?

Daniel Craig17:09:46

Same result. If you don't need form-2 style local state, there's no reason to define your react component with the (fn [] )

John David Eriksen21:09:28

Hi there, I started a thread in #clojurescript and it was suggested that it be linked here since it concerns re-frame. https://clojurians.slack.com/archives/C03S1L9DN/p1663169861173409

superstructor00:09:49

In short, you use fx handlers for async (promise) api interaction then chain together a series of event handlers that use that fx handler.

superstructor00:09:29

Alpha HTTP fx exploring a state machine based approach - https://github.com/day8/re-frame-http-fx-alpha

superstructor00:09:09

Fetch fx w/ promise but no state machine experiments - https://github.com/superstructor/re-frame-fetch-fx