re-frame

https://github.com/Day8/re-frame/blob/master/docs/README.md https://github.com/Day8/re-frame/blob/master/docs/External-Resources.md
Clément Ronzon 2020-12-31T00:40:09.046500Z

Hey guys, I couldn't find a way to programmatically change the url of the page from an effect handler, I'm sure there might be an easy way... anyone knows? (I'm using pushy and bidi for routing) [answer in thread please]

p-himik 2020-12-31T08:21:53.047700Z

It's right there in the pushy documentation: https://github.com/kibu-australia/pushy#routing-libraries The "Bidi" section has a set-page! function - just call it within an effect.

Clément Ronzon 2020-12-31T14:06:20.052600Z

Thank you @p-himik I am using the db to store the current route. When I try to change the route, it correctly displays the corresponding panel, but it won't change the url.

Clément Ronzon 2020-12-31T14:07:44.052800Z

I believe I have to use set-token! to change the url (see https://github.com/kibu-australia/pushy#googhistoryhtml5history-methods) but I can't add an event to control it since it would create a circular reference.

p-himik 2020-12-31T14:08:18.053200Z

No idea, sorry. FWIW I'm using kee-frame myself that ties it all together itself.

Clément Ronzon 2020-12-31T14:09:42.053400Z

I've seen this implementation (https://github.com/MattiNieminen/re-fill/blob/master/src/re_fill/routing.cljs) that saves the pushy instance into the db itself making it accessible from any event, eliminating the circular reference. I have to try it.

Clément Ronzon 2020-12-31T14:10:07.053800Z

Thanks @p-himik, I'll check kee-frame.

Clément Ronzon 2020-12-31T14:42:34.054Z

Actually, thank you so much @p-himik, looking at kee-frame's code I found how they did it! (and it's pretty simple actually) /src/kee_frame/router.cljc:88

(rf/reg-fx :navigate-to goto)
And /src/kee_frame/router.cljc:28
(defn goto [data]
  (navigate! @state/navigator (url data)))
tl;dr; With such an unqualified event ID we don't have to worry about the circular reference issue anymore.

p-himik 2020-12-31T14:44:16.054200Z

You don't have to worry about circular dependencies with fully qualified keywords as well - you can just avoid using an alias and instead spell out the whole keyword with its namespace.

Clément Ronzon 2020-12-31T15:11:52.054400Z

A fully qualified keyword gives me a compilation error:

68 |           [:dispatch [::spui.routes/navigate-to route]]]}))
------------------------------------------------------^-------------------------
spui/events.cljs [line 68, col 48] Invalid keyword: ::spui.routes/navigate-to.
Did I write it wrong? spui.routes:
(re-frame/reg-event-fx ::navigate-to navigate-to)

p-himik 2020-12-31T15:16:34.054700Z

Try :spui.routes/navigate-to instead of ::spui.routes/navigate-to (single colon). Double colon expects a namespace alias.

Clément Ronzon 2021-01-02T22:31:36.109900Z

Excellent! Thank you!!

ackerleytng 2020-12-31T05:50:06.047400Z

does re-frame-10x work with reagent 1.0.0? I'm not sure whether there's something wrong with my config or whether it's a versioning problem - it seems like when i recompile, the page occasionally fails to load

p-himik 2020-12-31T08:21:53.047700Z

It's right there in the pushy documentation: https://github.com/kibu-australia/pushy#routing-libraries The "Bidi" section has a set-page! function - just call it within an effect.

paulbutcher 2020-12-31T13:22:14.051600Z

I have an action I’d like to take when two different things (an API access token and a GPS location) become available in my app db. This would be easy enough if it was a component—I would simply have the component subscribe to both app db keys and everything would be good. But in this case, the action has no user-visible effects (it simply adds more information to the app db by talking to the API). So I’m looking for something like “fire an event when these two events have fired”. Suggestions gratefully received!

p-himik 2020-12-31T13:26:36.051800Z

If it's indeed "if seen eventA and eventB, fire eventC", then you can use https://github.com/day8/re-frame-async-flow-fx If it's "when valueA and valueB are set, fire eventC", then you can use a global interceptor.

paulbutcher 2020-12-31T13:28:47.052100Z

Thanks! My situation is more like: • If eventA is fired, and valueB is already in the app db, go ahead (using valueB in the handling of eventA). • If eventA is fired, but valueB isn’t (yet) in the app db, wait until it is and then handle eventA. (if that makes sense?)

paulbutcher 2020-12-31T13:29:26.052300Z

I imagine that I can transform it into one of the two cases you mention above 👍

1👍
Clément Ronzon 2020-12-31T14:06:20.052600Z

Thank you @p-himik I am using the db to store the current route. When I try to change the route, it correctly displays the corresponding panel, but it won't change the url.

Clément Ronzon 2020-12-31T14:07:44.052800Z

I believe I have to use set-token! to change the url (see https://github.com/kibu-australia/pushy#googhistoryhtml5history-methods) but I can't add an event to control it since it would create a circular reference.

p-himik 2020-12-31T14:08:18.053200Z

No idea, sorry. FWIW I'm using kee-frame myself that ties it all together itself.

Clément Ronzon 2020-12-31T14:09:42.053400Z

I've seen this implementation (https://github.com/MattiNieminen/re-fill/blob/master/src/re_fill/routing.cljs) that saves the pushy instance into the db itself making it accessible from any event, eliminating the circular reference. I have to try it.

Clément Ronzon 2020-12-31T14:10:07.053800Z

Thanks @p-himik, I'll check kee-frame.

Clément Ronzon 2020-12-31T14:42:34.054Z

Actually, thank you so much @p-himik, looking at kee-frame's code I found how they did it! (and it's pretty simple actually) /src/kee_frame/router.cljc:88

(rf/reg-fx :navigate-to goto)
And /src/kee_frame/router.cljc:28
(defn goto [data]
  (navigate! @state/navigator (url data)))
tl;dr; With such an unqualified event ID we don't have to worry about the circular reference issue anymore.

p-himik 2020-12-31T14:44:16.054200Z

You don't have to worry about circular dependencies with fully qualified keywords as well - you can just avoid using an alias and instead spell out the whole keyword with its namespace.

Clément Ronzon 2020-12-31T15:11:52.054400Z

A fully qualified keyword gives me a compilation error:

68 |           [:dispatch [::spui.routes/navigate-to route]]]}))
------------------------------------------------------^-------------------------
spui/events.cljs [line 68, col 48] Invalid keyword: ::spui.routes/navigate-to.
Did I write it wrong? spui.routes:
(re-frame/reg-event-fx ::navigate-to navigate-to)

p-himik 2020-12-31T15:16:34.054700Z

Try :spui.routes/navigate-to instead of ::spui.routes/navigate-to (single colon). Double colon expects a namespace alias.