更改路由时如何防止使用 react-router-dom 和 react-redux 重新渲染？

Question

我有这些路由器

function Rutas(){
  <Provider store={store}>
    <Router>
     <Switch>
      <Route exact path="/">
       <Home />
      </Route>
      <Route path="/about">
       <About />
      </Route>
     </Switch>
    </Router>
  </Provider>
}

这是我的侧边栏

function Home(){
 return (
   <>
    <NavLink to="/home">Home</NavLink>
    <NavLink to="/about">About</NavLink>
   </>
 )
}

这是 Home 组件

function Home(){
 const dispatch = useDispatch();
 const homeData = useSelector((data) => data.homeData);
 React.useEffect(() => dispatch(getHomeDataAction),[dispatch])

 return (
   <>
    {
     homeData.map((res) => <span>{res.title}</span>)
    }
   </>
 )
}

这是关于组件

function About(){
 const dispatch = useDispatch();
 const aboutData = useSelector((data) => data.aboutData);
 React.useEffect(() => dispatch(getAboutDataAction),[dispatch])

 return (
   <>
    {
     aboutData.map((res) => <span>{res.title}</span>)
    }
   </>
 )
}

在第一次渲染 Home 组件的页面加载时，没关系，当我将路由更改为 About 组件时，它也被渲染了，这没关系，但问题是当我再次将路由更改为 Home 组件时，它又被渲染了它调用 useEffect 并再次调度，我想防止在路线更改时再次调度，因为我有很多数据并且需要一段时间才能再次呈现来自 USESELECTOR 和 UI 的数据，它太慢了。

请告诉我一些解决方案或建议。

谢谢☺

Answer 1

您可以以某种方式记住 getHomeDataAction 操作是否已调度。

    const loadedData = useSelector((data) => data.homeData.loaded);
    React.useEffect(() => {
    if (!loadedData) {  
      dispatch(getHomeDataAction)
    } 

  },[dispatch, loadedData])

总而言之，有条件地调用getHomeDataAction 操作可能会有所帮助。 除了这些更改之外，您还应该扩展减速器。 在第一次调度 getHomeDataAction 操作后，loaded 属性的值应该变为 true。