Fork me on GitHub
#re-frame
<
2021-05-11
>
Fabim13:05:32

Hey. Is there a best practice way to inject the js/document into a reg-sub using interceptors? My reframe subscription calculates the position of elements in a game board div in relation to each other. Using getElementById js/document and the .-offsetLeft to calculate css left and top would make the sub non pure. I could also do the positional math in the component directly.

p-himik14:05:07

Interceptors are only for events, not subscriptions. No need to inject js/document anywhere because it's already a singleton. Unless you need to create mocks of documents. Even if you use js/document in a sub, the sub won't be recalculated because a document has nothing to do with the Reagent's reactive context. Don't use getElementById if you are the one controlling that component. Instead, use React refs. There are two reasonable ways to solve that: - Listen to some JS event that's fired when that position that you're interested in changes. If there are no such events, just do it on each requestAnimationFrame. In the JS event listener dispatch a re-frame event and write the position to the re-frame's app-db. In the relevant sub, just use that position - Don't use re-frame for that particular part of your app - just keep it confined to Reagent. But it's a trade-off

Fabim16:05:22

Ah thanks. Thought subs should be pure. My board cells don’t change. their offset is the reference point for tokens to move around. Would you still use react ref for it?