re-frame 2020-04-03 | Slack Archive

Ramon Rios10:04:06

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

p-himik10:04:26

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?

p-himik10:04:21

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.

p-himik10:04:36

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

petterik17:04:53

@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 `clojure.data/diff` of db, before vs after, which shows
     the changes caused by the event handler.

👍 12

Ramon Rios10:04:38

Looking into that. Thank you

motform10:04:51

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”.

p-himik10:04:21

And what's the question?

motform10:04:51

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

motform10:04:56

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

p-himik10:04:54

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.

motform10:04:07

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

p-himik10:04:01

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.

p-himik10:04:51

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.

motform10:04:09

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

motform10:04:32

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

p-himik10:04:08

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.

p-himik10:04:35

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.

motform13:04:37

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

victorb15:04:11

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. https://github.com/Day8/re-frame/issues/233 and https://github.com/johnswanson/re-frame-debounce-fx shows how you can use that

p-himik15:04:51

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

2020-04-03

Channels