@pmooser hard to say without knowing specifics, but a couple of things to watch out for: https://presumably.de/reagent-mysteries-part-2-reloading.html

Do the new docs yet document React keys?

i wrote a little section on that but i’m not sure it made it in. https://gist.github.com/jmlsf/17c588deb326e538dcea6847bc66db9b#keys

I’ll submit a PR so that it gets added to the creating components doc

if you think that should be done differently or more thoroughly feel free to steal it and edit it

i think it mostly copied it from the release notes

@lee.justin.m can you modify the examples to show them in the context of a seq like for

yea that’s a good idea

That's why I had dropped it for the moment

that’s considerably more useful

Yeah, I'm thinking about writing why they are needed etc. and comparison between workarounds (and what they do and why they aren't as good as real unique keys)

Thiis is probably one of the most common things I mention during reviews and looks like this isn't documented yet

@juhoteperi if you want to take that on I would be very appreciative. feel free to use any or none of what i put together. it really needs to be written and probably be in its own section. we should probably put references to it in the sequences section and the creating components section too

hm never mind there isn’t a sequences section. we just mention it obliquely in the faq at one point

Feel free to steal from https://presumably.de/reagent-mysteries-part-1-vectors-and-sequences.html

Hi all, I’m fairly new to reagent w/ previous knowledge of om.next. I’m trying to simply figure out how to pass route params into a component, but all attempts fail. Here’s the code, anyone have any ideas? https://gist.github.com/njj/cdc852e51e255e99b62946a13565a665#file-foo-cljs-L31

@njj i just stick the params in the router atom and then my top level component pulls from the atom and passes as a param

I see, so my (defonce page (atom #'home-page)) needs to pass arguments?

the sample code you pasted puts the actual component in the atom. i don’t do that. i put a keyword that represents the component and then in my top-level router component i just have a case statement

(secretary/defroute "/app/notebook/:notebook-id"
                    {notebook-id :notebook-id}
                    (reset! current-route {:page :notebook
                                           :notebook-id (str->int notebook-id)}))

then later I check for the value of :page and return a hiccup form with the right component and pass the parameters to that i grab from :notebook-id

any chance you can share a bit more?

i had to edit out a bunch of stuff, but I think this is right:

(defn router-component
  []
  (debug-fmt "routing to %" (:page @current-route))
  (case (:page @current-route)
    :notebook [home-component {:view :notebook :notebook-id (:notebook-id @current-route)}]
    ;; more cases here
    [:div "Page not found."]))

(defn mount-root []
  (reagent/render [router-component]
    (.getElementById js/document "app")))

what is current-route in this case?

is that the same as current-page on mine?

its your page atom

ok

oh yea current-page

there’s not thing special about it. you just need a component at the top level which derefs some kind of router state and returns the right component

got it

slight abstraction, I’m into it

how you structure the router state is totally up to you

i like things nice an explicit so i shy away from the techniques that use multimethods and weird stuff like that

@lee.justin.m does your current-route just look like:

defn current-page []
  [:div [@page]])

(defonce current-route (reagent/atom {:page :home}))

ah right

oh sorry i confused my self above. yea current-page is more similar to my router-component and page is similar to my current-route

i led you stray a bit there

the only difference is that instead of putting the component in the ratom and using it directly in current-page you would put data in the ratom and just return the hiccup based on that data

now that i’m thinking about it, you could actually avoid my case statement by just putting hiccup in the router ratom

like instead of

(reset! current-route {:page :notebook
                                           :notebook-id (str->int notebook-id)})

(reset! current-route [notebook-component blah blah blah])

i don’t know why i didn’t think about that before. i had run into the same problem you are having but my solution is a little clunky

hmm not sure if I follow haha

what did you router atom end up looking like then?

it would be easier (and more like what you are doing) if I just did this:

(defonce current-route (reagent/atom [home-component]))
(secretary/defroute "/app/notebook/:notebook-id"
                    {notebook-id :notebook-id}
                    (reset! current-route 
                            [home-component {:view :notebook 
                                             :notebook-id (str->int notebook-id)}]))
(defn router-component
  []
  @current-route)

nice!

I kind of got it working passing the params down

broke my back button somehow on the way though haha

oh its working magically 😄

@lee.justin.m ends up being something like, https://gist.github.com/njj/cdc852e51e255e99b62946a13565a665

things are still a little weird, but getting closer

i didn’t read it to carefully but yea that’s basically what I should be doing 🙂

the destructuring is a bit weird for the defroute

it seems to be passing the entry hash instead of just the value

oh that’s because you’re doing [step-page {:step-id step-id}] instead of [step-page step-id]

your component expects a value but you’re passing it a map

Supposed I’m using an imbedded component with ‘:>’ notation, and it has a ‘refs’ property with a name I pass in. Later on, I’ll need to access the component by that name to access its data. What’s the best way to do that?

@lee.justin.m @juhoteperi if writing docs on keys, feel free to use this material ... https://stackoverflow.com/questions/37164091/how-do-i-loop-through-a-subscribed-collection-in-re-frame-and-display-the-data-a/37186230#37186230

I had it down to do a refs.md using that material as a base, but would be very happy to see someone else do it

@jmckitrick i’m not quite sure what you are trying to do

Hmm. Let me poke around a bit more, @lee.justin.m

@lee.justin.m does your home component look for the :view and then switch on that?

yes.

also wtf is a Hiccup? 😄

haha. when you write [:div "hi"], that vector is called a hiccup

oh I see

https://github.com/reagent-project/reagent/blob/master/docs/UsingHiccupToDescribeHTML.md

so hiccup is just that vector representation of a dom el

I ask because I’m trying to clean this up:

(defn router-component []
  @current-page)

(defn mount-root []
  (r/render [router-component] (.getElementById js/document "app")))

exactly. for me, realizing that all you are doing is writing functions that return plain clojurescript vectors (i.e. hiccup), was a major revelation in how reagent works. because i was pretty new to cljs, this kind of thing (defn hi [] [:div "hi"]) looked like magic syntax to me. but it isn’t. it’s just data and nothing will happen to it until you pass it to reagent

but when I try to just pass @current-page, reagent yells at me about hiccups

what’s it saying? @current-page should just be a vector

(defn mount-root []
  (r/render [@current-page] (.getElementById js/document "app")))

this doesn’t work

invalid arity

get rid of the [] around @current-page

you are effectively passing it [[:div "hi"]]

no errors but routing doesn’t seem to work

route changes but page doesn’t update

oh right

you need that wrapping component

you can’t do it directly because there’s nothing to react to the atom changes

so the router-component, which seems to do nothing, actually does do something: it reacts to the current-page mutations

its weird you cant even do #(@current-page)

again, even if you do that, r/render doesn’t know to re-render when current-page mutates

(defn mount-root []
  (r/render [(fn [] @current-page)] (.getElementById js/document "app")))

this works

#(@current-page) is same as #([a vector here]) i.e. it will try to call the vector as function

huh yea i guess reagent can make an anonymous function reactive

Supposed I’m using re-frame, and after an ajax request succeeds, I want to issue another one. Is it permissible to dispatch an event from inside an event handler?

@jmckitrick yes, you'd use the :dispatch effect.

But you wouldn't use dispatch directly, because that would be sideeffecting

Hmm. So what’s the correct way?

https://github.com/Day8/re-frame/blob/master/docs/EffectfulHandlers.md

BTW, there is also a #re-frame channel

Ah, perfect.

Be sure to read the docs :-)

Index is here: https://github.com/Day8/re-frame/blob/master/docs/README.md

Will do, thanks for the reminder. I’m working my way through the Eric’s videos, and forgot about the deep docs I hadn’t gotten to yet.

That’s one area where re-frame shines: the docs

Is there any preferred library for handling global state w/ reagent?

I use specter

it takes a little bit of getting use to, but the code is easy to read once you have it going