reactjs - React useMemo 或 useEffect 在 redux 状态更改时调用了太多次

Question

我正在一个新的 React 应用程序上尝试不同的模式，在这种情况下，我有一个包含项目对象数组的 redux 存储。当组件加载时，我分派一个新的操作来获取所有项目并使用新值设置存储，在这种情况下，列表会正确呈现。当我从同一个组件的子组件调度相同的操作时，redux 状态会更新，主组件会重新呈现，但列表保持不变。

export const ProjectList: React.FC = () => {
//When projects change the component should rerender with the new store
  const { projects, isLoading, errors } = useSelector((store: IAppState) => store.projectState);
  const dispatch = useDispatch();
  const { setActiveProject } = useActiveProjectValue();
  const { setIsNewTask } = useIsNewTaskValue();

useEffect(() => {
    console.log('called');
    dispatch(getProjectsAction());
  }, []);

  return (
    <div className="ProjectList">
      {!isLoading ? (
        projects.map((project: IProject) => (
          <ProjectListItem
            key={project.docId ? project.projectId : uuid()}
            handleClick={() => handleClick(project)}
            project={project}
          >
            {project.name}
          </ProjectListItem>
        ))
      ) : (
        <p>Loading projects</p>
      )}
      {errors && <p>{errors}</p>}
    </div>
  );
};

我还尝试使用 useMemo 更改 useEffect 并向此函数添加项目依赖项，在这种情况下它可以工作，但它似乎触发了太多次操作：

useEffect(() => {
    dispatch(getProjectsAction());
  }, [projects]);

有什么建议/解决方案吗？谢谢！

标签： reactjsreduxuse-effect