tengo estos enrutadores
function Rutas(){ <Provider store={store}> <Router> <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/about"> <About /> </Route> </Switch> </Router> </Provider> }Esta es mi barra lateral
function Home(){ return ( <> <NavLink to="/home">Home</NavLink> <NavLink to="/about">About</NavLink> </> ) }Y este es el componente Inicio
function Home(){ const dispatch = useDispatch(); const homeData = useSelector((data) => data.homeData); React.useEffect(() => dispatch(getHomeDataAction),[dispatch]) return ( <> { homeData.map((res) => <span>{res.title}</span>) } </> ) }Y este es el componente Acerca de
function About(){ const dispatch = useDispatch(); const aboutData = useSelector((data) => data.aboutData); React.useEffect(() => dispatch(getAboutDataAction),[dispatch]) return ( <> { aboutData.map((res) => <span>{res.title}</span>) } </> ) }En la carga de la página por primera vez, el componente Inicio se procesa, está bien, cuando cambio la ruta al componente Acerca de, también se procesa y está bien, pero el problema es que cuando cambio la ruta nuevamente al componente Inicio, se procesa nuevamente y llama a useEffect y despachar de nuevo, QUIERO EVITAR ENVIAR DE NUEVO CUANDO LA RUTA CAMBIA PORQUE TENGO MUCHOS DATOS Y TOMA UN TIEMPO EN RENDIR DE NUEVO LOS DATOS DE USESELECTOR Y LA IU ES TAN LENTO.
Por favor dígame alguna solución o recomendaciones.
Gracias ☺
De alguna manera podría memorizar si la acción getHomeDataAction se envió o no.
const loadedData = useSelector((data) => data.homeData.loaded); React.useEffect(() => { if (!loadedData) { dispatch(getHomeDataAction) } },[dispatch, loadedData]) En general, llamar a la acción getHomeDataAction condicionalmente podría ayudar. Aparte de estos cambios, debe extender su reductor. Después de enviar la acción getHomeDataAction la primera vez, el valor de la propiedad loaded debe convertirse en verdadero.