Fork me on GitHub
#re-frame
<
2020-12-03
>
Gerome08:12:01

Hello fellow clojurians! The other day, I was trying to build an input field that doesn't have its state in a reagent atom but stored in the db. I thought that introducing a reagent atom would introduce state separate from the db. If we have separate state, then there are times when the db doesn't reflect the actual application state and I felt this would break the whole idea of the UI as a state machine. So, this worked for 99% of all use cases until I, being German, started entering umlauts on macOS using dead keys. Suddenly, dead-umlaut + a = ¨ä instead of dead-umlaut + a = ä which is what it's actually supposed to be. I then noticed that in several examples (react, redux, re-frame and re-frame realworld example), everyone introduced a separate state for input fields. Is it even possible to write fields the way I did without breaking dead keys? Is this because of the way React realizes the on-change event? (I noticed that the standard html on-change fires later than the one React implements on the input field.) See an example of how I did this below.

p-himik08:12:28

Just as an experiment - have you tried using rf/dispatch-sync?

Gerome08:12:52

Oh, interesting. No, I hadn't tried that. I'm pretty new to re-frame and reagent. I'll check it out.

Gerome08:12:13

Hm, no, it has the same effect. The only way, I was able to improve this so far was to introduce a huge debounce in an effect that delayed storing the data in the db. However, this only worked after setting the delay to 100ms which made entering letters very sluggish. Maybe, I'll try keeping the reagent atom as an interim state between db and input field.

p-himik09:12:02

That's an interesting issue, I have no clue what's going on. Alas, I cannot really help - I don't have a macOS and the input methods that I have in Ubuntu all work differently from what you observe.

Gerome19:12:10

Well, thanks anyway :)

Gerome19:12:11

Ah! I still had the debounce in place. dispatch-sync did the trick. Many thanks, @U2FRKM4TW!

👍 3