Anyone know what causes "Uncaught TypeError: Cannot read property 'document' of null" from re-frame-10x ?

I must be missing something. I have an ratom which is being used to track window resize. I decided not to put this in the app-db. I would like to have a component subscribe to this atom however i never get the component updated when the atom changes. I verified the atom value is reset on window resize. Right now i thought i would have a reg-sub which used the ratom as the signal function.. Am I thinking about this wrong?

Why not put it in the app-db?

i dont think its something for application state. The component i want to subscribe to the resize event is used for a d3 graph and would like the graph to resize correctly when the browser is resized. Maybe others have done this and I am making it bigger than it needs to be.

Ok, if window resize is only for that particular component, it’s perfectly OK to hold the state ‘within the component’. How did you define the component and the atom? Can you show some code?

(defonce window-size (let [size (ratom {:width  (.-innerWidth  js/window)
                                        :height (.-innerHeight js/window)})]
                       (.addEventListener js/window "resize"
                         (fn [] (reset! size {:width  (.-innerWidth  js/window)
                                              :height (.-innerHeight js/window)})))
                      size))

subscribing to this is where i have tried several things. first i created a named reg-sub and then in the component tried to subscribe to it. I also thought about just deref’ing the atom in the component directly - i get an initial value but not updates.

This might be a good read https://github.com/reagent-project/reagent/blob/master/doc/WhenDoComponentsUpdate.md

Actually.. I’m not sure what is the best way to implement this. My first idea was to create a component that uses reagent.core/with-let and define the ratom within the component and add event listeners for window resize there. Then the event listeners would be added when the component is mounted. with-let provides also finally block where you could detach the listeners.

This is maybe another option https://github.com/district0x/re-frame-window-fx#windowon-resize

However attaching event-handler to component is kind of an anti-pattern in re-frame according to #2 in here https://purelyfunctional.tv/article/react-vs-re-frame/ and the recommendation is to either use events or have ratom, which is what you’re doing.

And your component should update when you just deref the ratom.

Sorry for my random mumblings. 🙂 What I’m trying to say it should just work when you deref the atom in your component, no subscriptions or anything needed. However, using events and/or putting the state into app-db and using subscription would be fine also.

ok thanks ill go back to that attempt and see what i set up wrong. Thanks for the help

@valtteri you may be interested in https://github.com/gadfly361/breaking-point

Woops @argvader ☝️

thanks @gadfly361. It feels like i am very close. I am going to use your project but also look into the code how you did it and where i went wrong. I am getting the initial value but its like the reconciler for the component doesnt see the atom changed..

If you are getting the initial value and not updates .. I'd guess it would be an issue with your event listener (but looking at your code snippet above, I don't see anything that would be a suspect at first glance)

I'd add a print statement in that event listener function and confirm it gets printed to the console on resize

@gadfly361 I figured it out. Had nothing to do with subscription. I made the type-2 rookie mistake where the inner render function params didnt match

Ahh gotcha, we've all done it!