Fork me on GitHub
#re-frame
<
2018-08-16
>
samueldev03:08:42

Are subscriptions memoized / optimized based on their parameters?

samueldev03:08:54

I.E. say I have 2 components, component-a and component-b

samueldev03:08:36

component-a has:

(let [some-db-value @(subscribe [::subs/generic-subscription :foo])]
  ...)

samueldev03:08:07

and component-b has: (note the only difference is the param to the subscription)

(let [some-db-value @(subscribe [::subs/generic-subscription :bar])]
  ...)

samueldev03:08:43

Because they share a subscription, is a change to either sub going to cause a re-render for both? Or only for components that use the same sub, and the same sub params?

mikerod04:08:12

@samueldev you could put a println or similar in the ::subs/generic-subscription to find out probably

samueldev04:08:46

haha youre right @mikerod , will be trivial for me to find out myself, i only just stepped out and im on the bus right now 😛 i pondered it as i left my pc and thought id ask. will try in a bit!

mikerod04:08:49

However, the subscription is cached on the whole query vec

mikerod04:08:36

So the cache key used for subscribe is [::subs/generic-subscription :bar] and [::subs/generic-subscription :foo]

mikerod04:08:14

oh, your question was a bit different

mikerod04:08:41

you were asking if both would be re-rendered due to being reactive to the same underlying registered subscription

mikerod04:08:17

So I believe to answer that, each deref will register separate watchers on the underlying reaction

mikerod04:08:16

If the change to the subscription input signals does not cause a change in value from one of the deref, then I do not believe there will be any re-render triggered - because no watchers of the reaction (underlying the subscription) are triggered on a no change event

joost-diepenmaat08:08:33

@twashing in case you’re still looking into that problem with OPTIONS, you’re probably looking at CORS preflight requests. Your http server should be set up to handle CORS. Alternatively you can serve the frontend code from the exact same server (ip and port) as the /my/endpooint, though in my experience setting up CORS is less hassle down the road.

kurt-o-sys10:08:10

I'm using re-frame with draftjs, but it seems to be a problem:

(let [editor-state          (reagent/atom (raw-content->editor-state-or-empty
                                             @(re-frame/subscribe [:some-key])))
        static-toolbar-plugin (create-toolbar-plugin)
        toolbar               (.-Toolbar static-toolbar-plugin)]
    [:div.he-text-editor
     [:> editor {:editorState @editor-state
                 :onChange    #(println %)
                 :plugins     [static-toolbar-plugin]}]
     [:> toolbar]])
This shows the right value. However, whenever I add an onChange method, dispatching an event to change the value (of :some-key), it doesn't work anymore. The problem is: re-frame (react?) is doing 2 calls. The first call still has the old value, the second one has the new value. On the first call, the component gets the state from re-frame and sets this state. The second call, with the new value, seems to be omitted. This results in this behaviour: on changing :some-key (selecting another item in a list of items each having draftjs-box), the previous value is set, not the current value)

kurt-o-sys10:08:33

any ideas how to solve this?

mikethompson22:08:01

@kurt-o-sys I didn't really understand your explanation but looking at the code ... you are using a ratom .... so my guess is you should be using a Form-2 component

kurt-o-sys07:08:42

right, have done that as well. I'll recap the problem: I have plain js component (draftjs) and I want it to update when some re-frame state changes. When I run the code, it seems react (or reframe, or reagent) renders the component twice. The first time, the state is set, but also the onChange method of that component is called (that's some internal thing of draftjs). During the first call, reframe is still in the 'old' state. The second call, the reframe db has a new state, but the component (draftjs) is not updated, and still shows the old state.

kurt-o-sys07:08:49

thx, will check

mikethompson07:08:42

I just realised that draftjs is a React component, not just a js component. Maybe that link I gave is not so much for this situation.

kurt-o-sys09:08:53

right... it doesn't seem to work out fine for now. Still trying to see how to make it work properly.

jmclavijo23:08:48

Hello. Has anyone used a react template with re-frame? Is that something that is easy to integrate with? Total newb with front-end.