Entiendo que esta pregunta se ha hecho varias veces, pero mi ejemplo no sufre ninguna de las soluciones proporcionadas en los otros ejemplos. Espero que alguien pueda ayudar, gracias de antemano.

Aquí está mi porción, screenSlice.js:

 import { createSlice } from '@reduxjs/toolkit'; //this slice sets the state of the screens Y axis export const screenSlice = createSlice({ name: 'screenYPlacement', initialState: { offsetY: 0, }, reducers: { setoffsetY: (state, action) => { return { ...state, offsetY : action.payload } } } }); export const { setoffsetY } = screenSlice.actions export default screenSlice.reducer

Mi tienda, store.js:

 import { configureStore } from '@reduxjs/toolkit'; import screenReducer from './screenSlice'; export default configureStore({ reducer: { offsetY: screenReducer }, });

El archivo en el que se llama, app.js:

 import React, { useEffect} from 'react' import './App.scss'; import { useDispatch } from 'react-redux'; import { setoffsetY } from './redux/screenSlice'; import Header from './components/header/Header'; import Hero from './components/hero/Hero'; function App() { const dispatch = useDispatch() //this function will use the redux reducer to save the Y axis to redux const handleScroll = () => dispatch(setoffsetY(window.pageYOffset)); useEffect(() => { window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }); return ( <div className="App"> <Header/> <Hero/> </div> ); } export default App;