guys, hello

having a problem here creating a custom component using props and children in arguments

something like this (but is not working)

(defn tab
  [& props children]
  [rui/tab (merge props {:style {:padding-top tab-padding-top}})
   (map-keys children)])

errors ... i think i have the arguments wrong but can't find out what exactly

I don't think you can bind a function to arguments with [& a b]

maybe you meant [a & b]?

((fn [a & b] [a b]) 1 2 3 4)
;;=> [1 (2 3 4)]

@michael.heuberger: what escherize said. & in the argument list "Bind the rest of the arguments to this name", so your function can take any number of arguments. If a function has an argument list of [a & b] and I call it with (my-fun 1 2 3 4 5), a would be 1 and b would be [2 3 4 5].

What you probably mean is [props & children]

Hmm actually I wonder if b is a list and not a vector. Well, details 🙂

b would be a list, (not that it would usually matter) 🙂

I'm trying to figure out where to put my state in Reagent components, compared to how I'd normally approach it in React

in React I'd stick to props as much as possible and use callbacks to update state in a parent component, but it seems like the "Reagent way" is to pass atoms to children for them to deref and modify themselves

like

I have an app where you select configuration profiles in the sidebar and edit that profile in the main container

there is a single main component, with child components for the profile selector and configuration editor

if it were just React, I'd use callback functions as props to handle things like changing the selected profile

but from the Reagent examples it seems like I might want to pass an atom representing the selected profile to the profile selector itself and let it update that atom

but that seems a little messy

but it also seems simpler

am I on the right track?

@jcromartie I’d recommend you to check http://keechma.com and https://github.com/Day8/re-frame to see examples of architectures in reagent. But the main idea is that you send data down, commands up and change the main atom somehow which will propagate down to the UI.

if you have any questions about keechma, I’m the lead dev so feel free to ask me

hm

so, in that case, would the "main" component be the only thing dereferencing the "main" atom?

I'm checking the Keechma examples now

there is a concept of “subscriptions” which allow you to dereference parts of main the main atom

so each component gets only the data it needs

reagent will take care of updating the component when the data in the subscription changes

here are subscriptions for the todomvc example (notice that they are wrapped inside the reaction macro) https://github.com/keechma/keechma-todomvc/blob/master/src/keechma_todomvc/subscriptions.cljs

nice project BTW

thanks 🙂

the logo makes me want to listen to synthwave

or fire up my Amiga

so

For now I'm trying to really grok the basics of Reagent. I'd love to check out Keechma more but I want to avoid adding more libs if I can. I think my app is really simple.

@jcromartie: you can do basic subscription stuff yourself with the reaction macro https://github.com/reagent-project/reagent/blob/master/src/reagent/ratom.clj#L5 in a vanilla form-2 component... have a read of the keechma todomvc code above to figure out how reaction can work and take a look here for a good overview of the different ways of creating react components with reagent https://github.com/Day8/re-frame/wiki/Creating-Reagent-Components

do I really need subscriptions?

basically I have a thing on the left to select what to edit on the right, that seems quite simple

yes?

the examples here are helpful, but I am getting the sense that they are definitely not best practices http://reagent-project.github.io/

you don’t need subscriptions, but after the app grows it makes sense to split it into reading and writing parts. it helps with the code scalability. but even if you start without subscriptions it won’t be too hard to migrate later

thanks @kauko @escherize