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
Franklin 2021-05-06T07:20:31.406600Z

Hey all, I've been trying to use https://github.com/adazzle/react-data-grid with re-frame/figwheel and finding it quite difficult... any pointers to how I can do this?

Franklin 2021-05-06T07:28:34.406900Z

seems it's not as straight forward as I thought to use react libraries with figwheel. I have tried several things but I'm never able to require the library

2021-05-06T13:41:42.408500Z

Do you have a hard requirement on using figwheel? shadow-cljs makes consuming js libraries much easier

Franklin 2021-05-06T13:54:57.408700Z

thanks, I'll consider switching to shadow-cljs

2021-05-06T14:07:01.408900Z

there's a nice helper to get a project setup quickly: https://github.com/filipesilva/create-cljs-app you can then copy config etc from that project to yours

Franklin 2021-05-06T14:27:50.409200Z

sweet!

2021-05-06T16:35:52.410Z

Hi, I have a moderately complex re-frame application for doing visual query building[1]. I wanted to make a version of it that could be embedded in a tutorial page for live examples. The problem is that this means I want multiple instances of my complex machinery, each with its own database. Unfortunately re-frame’s global state machinery makes this hard. Here are some possibilities: ◦ Add an extra context parameter to every subscription, event, and database access. This seems like a lot of work and is inelegant. ◦ Use iframes. Simplest, but also inelegant and requires loading the common parts multiple times ◦ Add some hacks on top of re-frame to keep track of the context (eg, functions of my own that wrap the rf functions). I made some stabs at this but didn’t succeed; the flow of control in re-frame eluded my attempts to add stuff on top of it. Anybody have any suggestions? Seems like something like this should not be this hard. [1] http://hyperphor.com/papers/enflame-clojure-meetup.pdf

p-himik 2021-05-06T16:37:45.410100Z

It has been discussed very thoroughly in the past here: https://github.com/Day8/re-frame/issues/137

2021-05-06T16:54:15.410400Z

Thanks, that looks super useful!

1👍
2021-05-06T17:03:46.410700Z

Although no clear answer emerges…there are some forks that try to address this problem but they seem kind of sketchy. It’s been an open issue on re-frame for 5 years.

p-himik 2021-05-06T17:13:33.410900Z

It's been an open issue for other libraries that attempt to gather all the state in a single place as well, like e.g. Redux. There's simply no easy answer to it. Absolutely all approaches have downsides, and choosing one without offending a decent chunk of the users seems to be impossible.

2021-05-06T17:35:27.411200Z

Ah well. Thanks again for the info.

afleck 2021-05-06T19:36:21.411400Z

separating multiple instances of the same kind of state under separate keys in the global db and using a parameter in your events and subs to access them would definitely be tedious to convert to, but once it is implemented it definitely just works. of course the instance approach might be nicer in that you only have to specify the frame when you call and not when you write. one approach you might look into is writing a regsub macro that can automatically insert the proper instance subscription and then have that act as the “db” in your subs.

afleck 2021-05-06T19:38:46.411600Z

iirc the re-frame docs encourage custom regsub wrappers, and we use one pretty successfully. parameterized subs by section of the db are also easy to work with, and I imagine that even for the largest applications it wouldn’t be more than an afternoon of a mechanical refactor if they are already well organized to begin with

afleck 2021-05-06T19:48:52.411800Z

if you follow this to the letter you can get a working npm setup for figwheel-main. https://figwheel.org/docs/npm.html

afleck 2021-05-06T19:49:58.412100Z

i think there may also be a leiningen template for it

2021-05-06T20:03:03.417Z

Hi folks. When a page is loaded, my app check if there’s any query params. If there are, then it must execute a series of sync dispatches. I’m trying to achieve this with an event that uses :fx for dispatching two events. However, I’m pretty sure it’s not working as intended. I see that the second event in fx is dispatched before the chain of events dispatched by the first one finishes. Am I missing something? (consider that the first event uses :http-xhrio and the success condition makes another request. Not sure if this influences how fx works).

p-himik 2021-05-06T20:08:52.417100Z

You aren't missing something, that's how it's supposed to work. re-frame has a queue of events. The :dispatch effect handler just adds to the end of that queue.

2021-05-06T20:12:48.417300Z

I see that ‘`fx` allows for effects to be ordered’ [1]. So this order just refers to when the events are put into the queue, right? [1]: http://day8.github.io/re-frame/releases/2020/#110-2020-08-24

2021-05-06T20:12:59.417600Z

For my use case, should I use dispatch-sync for the first event then?

p-himik 2021-05-06T20:15:57.417800Z

> So this order just refers to when the events are put into the queue, right? Yes. > For my use case, should I use dispatch-sync for the first event then? It won't solve anything. The request will still be async. Instead, don't use two :dispatch but rather wrap one :dispatch in another. Alternatively, use https://github.com/day8/re-frame-async-flow-fx or something like it. Be extra careful about handling failed requests and about issuing multiple requests - you don't want any bad states or race conditions.

2021-05-06T20:20:52.418100Z

Makes sense. Thanks!

1👍
2021-05-06T20:26:21.418400Z

Just out of curiosity, what’s the use case for fx? In other words, why would the order of events being put into the queue matter? (since you won’t control their order of execution anyway)

p-himik 2021-05-06T20:30:37.418600Z

You are controlling their order of execution. You're controlling everything. In your particular case, :on-success or whatever is dispatched after the second event in :fx, that's it.

1👍
p-himik 2021-05-06T20:31:00.418800Z

Events go into the queue. The queue is ordered. That's all there is to it.

1👍1✅
superstructor 2021-05-06T23:15:45.419200Z

The official solution to this in a future, as yet unscheduled, re-frame release will be to use React context (https://reactjs.org/docs/context.html) to pass around a 'frame'; i.e. there will be a default 'frame' ala traditional re-frame then multi-frame support for n number of frames on the page.

superstructor 2021-05-06T23:17:22.419600Z

In this way we will also solve re-usable 're-frame components'; i.e. bundles of subs/events/views with their own context that can be multi-instanced on a page.