Question

想要使用商店中的一些数据，并使用选择器获取它，但问题是我不想在数据更改时重新渲染组件

export function App() {
  const userStatus = useSelector(selectUserStatus);
  return userStatus === UserFetchStatus.LoadingFromStorage ||
    userStatus === UserFetchStatus.Loading ? (
    <Spinner /> 
  ): <Content />; }

有没有办法在不进行重新渲染循环的情况下获取这些数据？

Answer 1

您可以尝试以下代码：

import React, { useEffect, useState } from 'react'; 
import { useStore } from 'react-redux';
import { includes } from 'fp';

const isLoading = includes([
  UserFetchStatus.LoadingFromStorage,
  UserFetchStatus.Loading]
);

const App = () => {
  const store = useStore();
  const { userStatus } = store.getState();
  return isLoading(userStatus) ? <Spinner /> : <Content />;
};

这应该有效，因为根据 react-redux 文档，当状态改变时 useStore 不会更新组件 https://react-redux.js.org/api/hooks#usestore

使用 store 中的数据时如何避免重新渲染功能组件

1 个答案: