Fork me on GitHub
#re-frame
<
2019-04-22
>
ackerleytng14:04:44

is there a way to change the url (pushState) based on a subscription?

valtteri14:04:58

@ackerleytng In general subscriptions should not cause side-effects. Try thinking it this way: what is the event that should cause the url to change? That event should probably have an effect that calls pushState.

ackerleytng14:04:48

hmm but the subscription is kind of a derived result

ackerleytng14:04:19

i have two events, one that adds to a map and one that removes

ackerleytng14:04:40

the subscription returns (keys (:results db))

ackerleytng14:04:03

I now have a component that subscribes to the subscription in question and updates the url as a side effect, then returns an empty [:div]

valtteri15:04:55

That sounds a bit hacky. 🙂 Sometimes it’s possible to make the calculation of derived results already at the event handler(s) and store the results into the db and/or dispatch other side-effects.

lilactown15:04:16

1. you can subscribe outside of a component, which would probably be incrementally better. 2. I think one would prefer to have the pushState as an effect and a co-effect. treating it as derived from the app-db is frought with problems

👍 4
ackerleytng14:04:22

how do you subscribe outside a component?

lilactown15:04:11

the biggest problem is that the URL can be changed by a whole host of things. the user can use the forward/back button. they might manually type in the URL. they may have bookmarked a specific thing or clicked a link to navigate to a place

lilactown15:04:45

if you're relying on state in the URL bar, you should ensure that you are covering these cases appropriately so that you don't break the user experience for your app

rgm17:04:18

@ackerleytng I’m not at all sure this is the best way to deal with pushState, but here’s my best take so far: https://github.com/rgm/bidi-pushy-example/blob/master/src/cljs/sample/core.cljs

rgm18:04:26

as @lilactown suggested, it ended up working OK when treating it as a coeffect/effect pairing.

valtteri18:04:04

Personally I’m using reitit for routing (both backend and frontend) and to me it feels simpler than bidi & pushy. I implemented a small example how to use it with re-frame. https://github.com/vharmain/reitit/tree/frontend-examples/examples/frontend-re-frame

👍 8
rgm18:04:55

oh, nice. Yeah, I’ve been meaning to switch to reitit but, y’know … other things and all that.

rgm18:04:40

notice I had to retrofit back in the query-params as a consequence of bidi’s philosophy on query params https://github.com/juxt/bidi/issues/51

valtteri18:04:02

Ahh that’s why it seemed nasty. 🙂

ackerleytng22:04:13

Thanks! I'll try that