re-frame 2018-05-14 | Slack Archive

@eoliphant Can I use them for inspecting re-frame in clojure ? I thought that is only available for browser .

@shakdwipeea What are you trying to do? I have difficulty imagining how re-frame would be useful without a browser and clojurescript.

shakdwipeea08:05:16

I am experimenting with re-frame for communication b/w clojure and clojurescript. I have created an effects handler which send the data to my server using web sockets. This data is generally of the form [:some-event data], on the server upon receiving this data I am doing a dispatch for that event. Now I have event handlers defined in clojure which is then triggered, the server can also communicate to client in a similar problem. The works well for a few times, but after some time my event handlers on the server are not being called even after dispatch.

shakdwipeea08:05:22

component for running it on clojure https://github.com/entranceplus/snow/blob/master/src/snow/comm/core.clj#L59

iGEL09:05:31

Hi. I'm creating a form 3 component and was wondering, whether it's considered bad practice to trigger side effects in reacts lifecycle hooks. On component-did-mount, I bind a js event handler and call a js function and on component-did-update I trigger a change event on one dom node. Should those be effects or do you think it's fine?

Oliver George10:05:49

There are certainly times when it's unavoidable to get at specific features. In my business apps it's pretty rare I jump to it.

Oliver George10:05:09

Is there a specific example which you have in mind?

troglotit11:05:00

mounting scroll handlers on window - better to do in react lifecycles, high-level logic like :user-closed-popup - better in effects.

iGEL11:05:50

Yes, avoiding side effects as much as possible is obviously the right way to do it, but here I work with existing code. It's about bootstrap-toggle, an open-sourced thing. I need to initialize it in the beginning so it renders and if the state updated, I need to trigger the change event to make it reflect that change in the UI.

Oliver George13:05:08

Yeah, then you're probably on the right track... except it's always nice to look for a react component to replace old stateful ones.

iGEL13:05:44

came to the same conclusion and rewrote the component without jquery. Just reuse the styling 😉

iGEL13:05:03

way simpler than making that stateful thing work

Oliver George23:05:44

Yeah, exactly

sveri12:05:50

Hi, whats the idiomatic way to set an option as selected in a html select component? Is it (if (= value (rf/subscribe [:selected-value]) "selected" "")?

elarouss00:05:06

i think you just need to set the value property of the select input https://reactjs.org/docs/forms.html#the-select-tag

sveri06:05:27

@U6AE62UCT Thats exactly what I was looking for, thank you very much.

eoliphant17:05:00

ah sorry @shakdwipeea, missed the ‘in clojure’ part

mikerod17:05:17

@sveri I think that is one reasonable way,but you need to deref the subscription. Also, do you mean to set the :selected property of a <option> element?

(let [selected @(rf/subscribe [:selected-value])]
  ...etc...

 [:select 
  [:option (cond-> {} (= value selected) (assoc :selected true)) ...etc...]
 ...etc..]

)

sveri17:05:48

@mikerod Thanks, thats the way I did it. I was just wondering if there is a more succinct way

mikerod17:05:02

I don’t know of anything. You could perhaps make a custom component that encapsulated that behavior

mikerod17:05:15

if you wanted to do it more often in different context for example

Bravi22:05:14

I’ve got this type of subscription:

(re-frame/reg-sub
 ::is-loading?
 (fn [db [_ & path]]
   (let [full-path (into [:loading] path)]
     (get-in db full-path))))

and then I’m using it like so

(re-frame/subscribe [::subs/is-loading? :sortable :projects])

and it always returns undefined

Bravi22:05:19

I was wondering - can I not pass multiple arguments to the subscription like that?

mikerod22:05:27

@bravilogy that seems fine

mikerod23:05:15

destructuring should work as typical on a fn

mikerod23:05:03

Are you sure that ::subs/is-loading? is resolving to the same qualified keyword as where you are defining the re-frame/reg-sub on ::is-loading?

Bravi23:05:04

yes, because when I log out path and full-path in that function, they show up

Bravi23:05:10

at the right time

Bravi23:05:25

to be more specific, it’s on a button click

mikerod23:05:21

if you are seeing the fn called and the args showing, that sounds like it is working

mikerod23:05:26

so perhaps the path doesn’t exist in your db?

mikerod23:05:39

is @(re-frame/subscribe [::subs/is-loading? :sortable :projects]) returning nil?

Bravi23:05:43

so a button click updates db and it does this:

(re-frame/reg-event-fx
 ::reorder-list
 (fn [{:keys [db]} [_ path new-items]]
   {:db (assoc-in db [:loading :sortable :projects] true)}))

Bravi23:05:09

shouldn’t that be creating the path in db?

mikerod23:05:30

Looking at that, I’d think so

mikerod23:05:37

but it’d be better to inspect your db to be sure

mikerod23:05:56

bunch of ways to do that, not sure what tools you may be using

mikerod23:05:38

there is the re-frame-10x which I’m still getting around to exploring more. There is re-frisk which lets you look at the db state via a click/expand UI widget. Then you can also just make a subs on the db and do some REPL prodding at it or prns etc

mikerod23:05:49

You probably want to double check the db is getting in the state you expect though

Bravi23:05:19

something even weirder here:

(re-frame/reg-sub
 ::is-loading?
 (fn [db [_ & path]]
   (let [full-path (into [:loading] path)]
     (js/console.log (get-in db [:loading :sortable :projects]))
     (get-in db full-path))))

that console.log outputs the correct value 😕

Bravi23:05:03

but it outputs undefined when I do

(get-in db full-path)

Bravi23:05:50

umm.. one question. this is how I subscribe to that:

:reagent-render
      (fn [items item-view db-path]
        (let [is-loading? @(re-frame/subscribe [::subs/is-loading? :sortable :projects])]
        (js/console.log is-loading?)
        (if is-loading?
          [:div "Is loading now"]
          [:ul.list-group
           (map item-view items)])))

Bravi23:05:55

is that a valid way to do it?

Bravi23:05:18

or should I have this somewhere at the top?

2018-05-14

Channels