Fork me on GitHub
Ramon Rios10:04:06

have you folks try to do logging into re-frame/clojurescript?


I assume you meant "in" and not "into". If that's the case, the answer is "yes". :)

Ramon Rios10:04:11

I'm trying to log some events. Is there any documentation to find it?


I don't think I've seen it. What exactly are you trying to do?

Ramon Rios10:04:49

I update a few values in some events and i'm trying to log these changes.


You can use an interceptor to catch all of the changes. Check out how kee-frame does it.


@UNST81B9P Have you looked at the re-frame.core/debug interceptor? A part of the doc string:

An interceptor which logs/instruments an event handler's actions to
  `js/console.debug`. See examples/todomvc/src/events.cljs for use.

  Output includes:
  1. the event vector
  2. a `` of db, before vs after, which shows
     the changes caused by the event handler.

👍 12
Ramon Rios10:04:38

Looking into that. Thank you


OK, this is gonna be a super noob question, but here goes. I have a text field which input filters which entities are shown. the field syncs its contents to a map in the app-db that also includes other things, states of toggles and the like. I want to have it so that the app queries the back end as the user is typing, so my on-change now looks like this:

#(let [val (-> % .-target .-value str)]
        (rf/dispatch [:add-search val])
        (when (< 3 (count val))
          (rf/dispatch [:do-search (util/->transit+json @(rf/subscribe [:filters]))])))
Now, this sends the search event with whatever was in the app-db before the last change. I guess this is because it initiates both events in the same loop, which explains why it searches with “fo” when the state of the input field is “foo”.


And what's the question?


(sorry, have to turn of slack sending on enter)


I amended the first post. my question is how do I update the value and then trigger the second, backend-query event in sequence.


First of all, do not use subscribe or deref externally defined subs in a JS event handler. There's a page in re-frame docs about it, somewhat recent.


so like (loop with event update search) -> (loop with event query backend) instead of doing both in the same cycle


As to your actual question, it seems that you don't validate the current value before writing the results received from the backend into the DB.


1. User enters abcd 2. Search is started on abcd 3. User enters abcde 4. Search is started on abcde 5. Search result arrives for abcd <- you must do the check here that the input string is still abcd.


Alright, that makes sense, should i move the subscribe into a top level let in the component? I guess that would make into a type 2


ok, that also makes sense. should i do that with an interceptor?


Either use @(subscribe [...]) outside of the JS event handler (which can cause extra re-renders) or just move the extraction of whatever data you need to the re-frame event-handler.


How you do the check from point 5 is up to you. IIRC I just compare the values in an event, I don't use interceptors for that.


Thank you so much for the help! I’ve refactored out the subs from the events handlers and was able to validate the values in the event. solved it very nicely!

👍 4

another way of solving the problem is leveraging "debounce" so you don't send a request for each change, but wait X seconds or ms before actually performing the request. and shows how you can use that


It won't solve the problem because a round trip could end up being longer than the debounce delay.