Fork me on GitHub
#re-frame
<
2017-09-04
>
danielneal07:09:40

I think that has to be done using an fx that puts something in the db

jumar09:09:43

I just watched lambdaisland episode 19 about re-frame and @plexus recommends using form-2 components most of the time (to register subscription only when component is created) - in particular with subscriptions like this: https://github.com/lambdaisland/breakout/blob/master/src/cljs/breakout/views.cljs#L27

(defn blocks []
  (let [blocks (subscribe [:blocks])]
    (fn []
      [:g
       (for [[column row color] @blocks]
         [block {:row row
                 :column column
                 :color color
                 :key (str row "--" column)}])])))
It looks like a sound advice to me but I'm wondering why the re-frame todomvc app doesn't use this approach, e.g. here: https://github.com/Day8/re-frame/blob/master/examples/todomvc/src/todomvc/views.cljs#L53
(defn task-list
  []
  (let [visible-todos @(subscribe [:visible-todos])
        all-complete? @(subscribe [:all-complete?])]
      [:section#main
        [:input#toggle-all
          {:type "checkbox"
           :checked all-complete?
           :on-change #(dispatch [:complete-all-toggle (not all-complete?)])}]
        [:label
          {:for "toggle-all"}
          "Mark all as complete"]
        [:ul#todo-list
          (for [todo  visible-todos]
            ^{:key (:id todo)} [todo-item todo])]]))
I consider todomvc app to be a guide for (advanced) beginners so I'm really wondering why that's the case if using form-2 component is best practice.

plexus13:09:17

Hi @U06BE1L6T, at the time the video was created this was still necessary. I wrote a blog post about the changes shortly after https://lambdaisland.com/blog/11-02-2017-re-frame-form-1-subscriptions

jumar13:09:42

Excellent, thanks for sharing!

mikethompson09:09:53

There was a time when you HAD to use form-2

mikethompson09:09:11

I'm pretty sure the video was created in that time

mikethompson09:09:28

Since then, changes have allowed for a relaxation of that

jumar09:09:42

yeah, that might be the case - he's using re-frame 0.8

jumar09:09:00

So should I use form-1 component most of the time? and when to use form-2 instead?

mikethompson09:09:22

You can use form-1 pretty much all the time these days.

jumar09:09:09

excellent, thanks a lot. last question 🙂. Why to use event handlers like this and not update app-db directly in :block-clicked event handler? (assuming I don't have a use case for dispatching :update-block and :remove-block outside of :block-clicked event handler) Is there any special reason?

jumar09:09:18

(reg-event-fx
 :block-clicked
 (fn [cofx [_ col row]]
   (if (= (-> cofx :db :color) 5)
     {:dispatch [:remove-block [col row]]}
     {:dispatch [:update-block [col row]]})))

(reg-event-db
 :update-block
 (fn [db [_ coords]]
   (update db :blocks assoc coords (:color db))))

(reg-event-db
 :remove-block
 (fn [db [_ coords]]
   (update db :blocks dissoc coords)))

mikethompson10:09:34

Events capture user intent.

mikethompson10:09:58

To achieve that intent the event handler might modify app-db or not

mikethompson10:09:04

Oh, wait. Hold on. I misunderstood your question. Ignore the two lines aabove

mikethompson10:09:24

I personally would not do the approach above

mikethompson10:09:36

It is kinda treating a dispatch as a kind of function call

jumar10:09:48

Thanks again for quick response. Your support is excellent 😉

danielneal10:09:07

@andre when I upgrade to re-frisk 0.5.0 I get some reader errors (in my code) on namespaced keywords eg #:a{:b 1 :c 1} (I'm using re-frisk sidecar 0.5.0 too - it's a react native projec)t. I'm guessing something is pulling in an old version of clojure or something like that. Is this somethng you've seen?

andre11:09:28

hi @U051H1KL1 i haven't made changes related to reader

danielneal11:09:30

ah ok thanks. I'm gonna drop back down and have another go later and if I figure out what was going on I'll let you know

andre11:09:15

@U051H1KL1 where do you see this error?

andre11:09:38

could you send screenshot?

andre11:09:39

we're using ns keywords in our RN project, and don't have such errors

danielneal11:09:13

are you using the clojure 1.9 #:a{:b 1} syntax?

andre11:09:16

where do you see this error?

danielneal11:09:43

it's in my code, but only when using re-frisk-sidecar 0.5.0

danielneal11:09:24

also it might be some weird interaction with figwheel or something

danielneal11:09:22

(I'm struggling a bit getting my dependencies all lined up, what with figwheel-bridge and everything

danielneal11:09:02

it's probably me just being dumb, just wondered if uyou'd seen the error

souenzzo15:09:31

It can be something with lift-namespace process

mheld14:09:05

what's the component library of choice for re-frame? just re-com?

deg16:09:54

@mheld - re-com is fantastic if your target is desktop. It is also usable for mobile, but has some issues. I've very recently moved from re-com to Semantic-UI based components for a smoother mobile experience. The canonical CLJS library for this is https://github.com/gadfly361/soda-ash. I've also started writing a wrapper around Soda-ash: https://github.com/deg/sodium that I see you've already tried. (I am still curious about the problem you reported. Do you have any more details?)

andre20:09:47

btw latest version of re-frisk written using re-com, it works well in chrome and safari, haven't tested in IE and FF