在不重复代码的情况下重用基于多个 redux props 的变量

Question

我想根据我的 redux 存储中的多个值设置属性。（如果有什么不同，我使用 Rematch 来处理我的全球商店）

在我的例子中，一个名为 showSidebar 的布尔值属性仅在满足其他几个条件时才为真 - 作为一个简化示例：loggedIn === true 和 userProjects.length > 0。

逻辑没问题，例如

const showSidebar = loggedIn && userProjects.length > 0;

...但我在很多组件中使用它，每次我都必须导入所有依赖属性并包含条件逻辑。

如何避免逻辑和导入道具的不必要重复？

我在想最好的方法可能是编写我自己的 useShowSidebar 钩子，它看起来像下面这样：

import { useState, useEffect } from 'react';
import { useSelector } from 'react-redux';

const useShowSidebar = () => {
  const loggedIn = useSelector((models) => models.model.loggedIn);
  const userProjects = useSelector((models) => models.model.userProjects);
  const [showSidebar, setShowSidebar] = useState(false);

  useEffect(() => {
    setShowSidebar(loggedIn && userProjects.length > 0);
  }, [loggedIn, userProjects]);

  return showSidebar;
};

export default useShowSidebar;

这是否是一种明智且有效的方式来实现这一目标而不会出现任何问题？或者，还有更好的方法？我想这一定是一个常见的场景。

我觉得应该有一种方法可以让全局存储本身中的属性 showSidebar 作为依赖于其他属性的属性，然后只导入这个属性到我的组件中（使用 mapStateToProps 或更现代的 useSelector 挂钩，但我不知道这是否可行。

Answer 1

您对 useState 的使用会导致不必要的重新渲染。把它写成一个选择器就可以了。

const useShowSidebar = () => {
  const showSidebar = useSelector((state) => 
    state.model.loggedIn && state.model.userProjects.length > 0
  );

  return showSidebar;
};

或者将其移动到选择器函数中并在您的组件中使用它：

const selectShowSidebar = (state) => 
    state.model.loggedIn && state.model.userProjects.length > 0;

// in your component:
const showSidebar = useSelector(selectShowSidebar)

在不重复代码的情况下重用基于多个 redux props 的变量

Reusing a variable that is based on multiple redux props without duplication of code

reactjs

redux

react-redux

react-hooks