re-frame 2022-10-14 | Slack Archive

Elliot Stern15:10:00

I’m trying to integrate a JS translation library into a reframe component. It provides a t function that’s easy enough to put in the app-db and provide as a subscription. The problem is that I need to re-render after e.g. a languageChanged event. The problem is that even though it’s easy enough to update t in the app-db, that doesn’t actually change t s value so the page doesn’t actually re-render. What’s the best way to hack around something like that? I’d like all the components that depend on t to rerender

p-himik15:10:35

I wouldn't put t in the app-db itself, I think. Unless it's create dynamically. You can store some data structure in the app-db that relies on the language, like {:lang :en_us, :t t}, the :t would be the same but :lang would change. Then you'd have some sub like

(rf/reg-sub :i18n-data 
  (fn [db _]
    ;; That map from the above.
    (:i18n-data db)))

And an util function like

(defn <t []
  (:t @(rf/subscribe [:i18n-data])))

And instead of using the :i18n-data subscription directly, you'd use the <t function.

Elliot Stern15:10:31

t isn’t created dynamically; the library is basically written as a singleton that it’s an instance member of.

p-himik15:10:51

Ah, then that map can be just {:lang :en_us} and the function can be

(defn <t []
  @(rf/subscribe [:i18n-data])
  t)

👍 1

Elliot Stern15:10:10

There’s some react bindings to it that offer const { t, i18n } = useTranslation(); as a hook; I was trying to match that kind of user experience

p-himik15:10:03

You can still use hooks with Reagent components BTW. But up to you.

Elliot Stern15:10:48

Doesn’t that involve messing around with some stuff to get it to compile to functional components?

Elliot Stern15:10:25

I was under the impression that it’s something that doesn’t work by default

p-himik15:10:49

Kinda. Three approaches: • Make all your components function ones by default • For each component that needs a hook, create a thin wrapper and use :f> • For each component that needs a hook, use a different library like https://github.com/lilactown/helix But I've never done it myself so no clue how well it ends up working with ratoms in practice.

2022-10-14

Channels