Fork me on GitHub
#reagent
<
2016-03-30
>
dvcrn01:03:45

Hi guys! I have a little problem with the rendering cycle (or so I guess) with re-frame. I have the following component:

(defn app-root []
  (let [logged-in? (subscribe [:logged-in?])]
    (if @logged-in?
      (fn []
        (println "Logged in:")
        (println @logged-in?)
        [logged-in-view])
      (fn []
        (println "Logged in:")
        (println @logged-in?)
        [login-view]))))
When logged-in? changes through re-frame, the println triggers but reagent doesn't use the logged-inview. It keeps showing the login-view instead

dvcrn01:03:03

do I need to tell it somehow that it should re-render?

mikethompson01:03:17

@dvcrn use this ... (not sure I have the parens right)

(defn app-root []
  (let [logged-in? (subscribe [:logged-in?])]
    (fn [] 
      (if @logged-in?
        [logged-in-view]
        [login-view]))))

mikethompson01:03:39

In your version, the first time app-root was called, it returned a render function which was then forever used as the renderer. In effect, in your version the if was never evaluated again after the first time.

mikethompson01:03:29

Whereas in my Form2 component the returned render function will be rerun (producing potentially different hiccup) each time @logged-in? changes

dvcrn02:03:41

let me try that!

dvcrn02:03:48

yup that works!

dvcrn02:03:53

interesting - I didn't know that

dvcrn02:03:55

thank you

zcaudate04:03:46

hey guys, I’m looking for a cljs dev (game development experience a plus) for a reagent based ux project. We're a startup based in China and so initially it’ll be remote/project based work. Please ping me if you’re interested (<mailto:[email protected]|[email protected]>) with your resume and previous creations.

vikeri11:03:03

@zcaudate: maybe belongs in #C05006WDW

zcaudate13:03:45

I thought i’d post to the reagent practitioners first 😃

pbaille13:03:50

Hello, I would like to use an external React component (https://github.com/gre/multi-slider) within reagent code. How am I supposed to do that?

pbaille13:03:06

thank you!

edbond14:03:38

how to add a key in map (map (fn [v] [test-comp v]) variables). I tried to add :key to first div in test-comp function, and have a warning about unique key for element in a seq

edbond14:03:39

Found a meta solution right on the homepage simple_smile ^{:key (str "test-variable-" i)}

edbond14:03:06

(map (fn [v] ^{:key ...} []))

adamkowalski17:03:55

I have also noticed that if you use into and for it doesn’t complain about missing a key

adamkowalski17:03:23

(into [:ul] (for [item items] [:li item]))

gadfly36117:03:45

@adamkowalski: using into will circumvent the need for keys, because the ul will be recreated on each re-render. So it avoids the need for keys, but also won't take advantage of react's ability to not re-render list items that havent changed. For small lists, I like using into, but you will have performance issues if you try that for "large" lists (whatever that means lol)

adamkowalski17:03:36

oh, that is good to know. I should probably go back and replace all my intos then haha

nooga19:03:33

is there an idiomatic way to use for and have index inside? think (for [v somevector] … [somecomp v (cursor a [:xxx INDEX])] …)

nberger19:03:23

is that what you are looking for @nooga?

nooga19:03:59

I came up with (for [[x i] (map vector stuff (range 1000))]

nooga19:03:15

but it seemed clunky

nberger19:03:25

works too simple_smile but yeah, map-indexed is basically for that

nooga19:03:52

yup, thanks!