Syncronize Scrolling with NgRx

Question

I want to sync two scrollable Lists(in different Components, but same view) using NgRx. How would I implement this?

I would really appreciate the help!

I'm familiar with the concept of NgRx, but can't really apply it to a new use case.

I have a model, which should store the scroll position and the displayedElements of a Tree List:

export interface ListStateModel{ scrollY: number displayedElemList: any[] }

I have a Action, that (should) send a Object with the two attributes.

export const getScrollAction = createAction( 'scrolled', props<{ data: ListStateModel }>() );

I tried creating the reducer (which maybe works):

export const initialState: Readonly<ListStateModel> = {displayedElemList: [], scrollY: 0};

export const scollReducer = createReducer(
  initialState,
  on(getScrollAction, (_state) =>{
    return _state
    }

  )
)

But where i'm really struggeling is the selector and the implementation in the Components