What is correct way to broadcast secretary URL parameters to reagent component

Question

I'm building an app on top of re-frame default template.

I have following secretary route:

(defroute "/users/:id" []
  (re-frame/dispatch [:set-active-panel :user-panel])

I want to access id parameter from URL in my reagent component. The only way of achieving it that I've found is setting it to db. Something like:

(defroute "/users/:id" [id]
  (re-frame/dispatch [:set-user-id id])
  (re-frame/dispatch [:set-active-panel :user-panel])

This will definitely pollute my db and such approach seems to be weird for me as I used to write something like this in the react (with react-router):

<Route path="/user/:id" component={MyComponent}>
// object with params automatically attached as props to MyComponent

So what is the correct way to broadcast secretary URL parameters to reagent component?

UPD: In comments there's a link to github discussion of this problem. Ones refer to setting URL params to db as a correct way. Anyways, I don't really like it. It causes a lot more complexity (setting params, subscribing to them, unsetting). And I don't like to think about URL params as app state. Is there any hack or something?

Gord

@PiotrekBzdyl I've update my question. If you have any hacks let me know, anyway thanks. – Gord

@PiotrekBzdyl Can you please add this as an answer. I'll mark it as correct if nothing new will appear in several days. Thanks for help – Gord

I have moved my comments into an answer. – Ency

Answer 1

The discussion on https://github.com/gadfly361/reagent-seed/issues/4 seems to cover exactly your scenario and I think this approach follows the "single DB" philosophy of re-frame where your DB content determines the whole state of your application (including the panel and its parameters).

I would argue that it's a matter of believing that a single atom DB is the right approach or not. Using path params directly (like Route component reading them directly from the URL) is like writing a component that doesn't use the atom DB but some alternative data source (in this case URL path).

One might say that the Route component does exactly what you refer to as complex logic (it's subscribing to path changes and manages another component state). In this case you are just reusing existing piece of code from the Route component instead of doing the same in your code updating DB data on URL path changes according to secretary routes.

Ency

Answer 2

the data is available from your browser url

(.. js/window -location -pathname)

then using bidi ( we use bidi and pushy instead of secretary. e.g. as blogged) then

(bidi/match-route your-routes url)

Elegance