I have an intersection observer that registers a list of elements as they are rendered. I would like to dispatch an action for a certain threshold, which means I would need to dispatch an action inside the callback. Unfortunately that breaks one of the hook rules so I am unable to use dispatch inside of the callback. Alternatively, I could pass down a reference too the dispatch to the callback. Although, I am not sure how too achieve this. Currently, this is how I create my Intersection Observer inside my component:
const dispatch = useDispatch()
let oi = createObserver(observerHandler) // 'observerHandler' is just the callback function
The observerHandler would look something like this:
const observerHomeHandler = (entries) => {
entries.forEach(entry => {
if (someThreshold)
// dispatch action
})}
Is there any way of accepting a parameter of dispatch without messing with the entries that is used by the IntersectionObserver?