Redux存储更改可能触发App.tsx中不必要的重新渲染的原因?

xfb7svmp  于 2022-11-24  发布在  其他
关注(0)|答案(1)|浏览(149)

基本应用程序.tsx文件没有列出要重新呈现的依赖项

export default function App():JSX.Element {
    session: SessionState = useAppSelector((state) => state.session);
        console.log("App file reloaded");
        return (
          <div>
              <ChildComponent />
              {session.cookieConsent ? null : <CookieConsent />}
          </div>
       );
    }

子组件是唯一用于执行以下操作的组件:

  • 列出redux状态session作为依赖项
  • 更新session状态存储。
const session: SessionState = useAppSelector((state) => state.session);
    const dispatch = useAppDispatch();
    ...
    dispatch(setSession({ ...session, updated }));  // state change is perfect
    useEffect(()=>{},[session])

主要的问题是,如果一个子组件正在更新redux状态/存储,为什么要重新加载App.tsx文件?如何阻止这种情况发生?

rt4zxlrg

rt4zxlrg1#

在App.tsx中使用session常量做什么呢?如果从App.tsx中删除该行(const session: SessionState = useAppSelector((state) => state.session);),它就不会重新呈现。

相关问题