Fork me on GitHub
#re-frame
<
2018-09-01
>
urbanslug11:09:13

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

argvader14:09:44

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?

valtteri15:09:34

Why not put it in the app-db?

argvader15:09:43

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.

valtteri15:09:57

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?

argvader15:09:25

(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))

argvader15:09:26

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.

valtteri15:09:11

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.

valtteri15:09:46

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.

valtteri15:09:55

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

valtteri15:09:17

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.

argvader16:09:25

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

argvader16:09:28

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..

gadfly36116:09:50

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)

gadfly36116:09:43

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

argvader17:09:47

@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 picard-facepalm

gadfly36117:09:31

Ahh gotcha, we've all done it!