在 redux 中选择整个切片是不好的做法吗？答案

【问题标题】：Is it bad practice to select an entire slice in redux?在 redux 中选择整个切片是不好的做法吗？
【发布时间】：2021-04-21 04:32:53
【问题描述】：

我想在 redux 中选择整个切片，如下所示：

interface AuthState {
  user?: User;
  shouldShowLogin: boolean;
}

export const authSlice = createSlice({
  name: 'auth',
  initialState,
  reducers: {
    setUser: ...,
    showLogin: ...,
    hideLogin: ...,
  },
});

export const useAuth = () => useSelector((state) => state.auth);

所以我可以在组件中执行类似const { user, shouldShowLogin } = useAuth(); 的操作。这在大多数情况下更方便，但我不确定这是否是不好的做法/效率低下。

我想为调度做类似的事情（即抽象掉 useDispatch()）。也许像const setUserWithDispatch = (info) => useDispatch()(info); 这样我可以在我的组件中简单地执行setUserWithDispatch(userInfo)，而不必执行useDispatch() 然后dispatch(setUser(userInfo))。

理想情况下，我想做const { user, shouldShowLogin, setUser, showLogin, hideLogin } = useAuth();，但我不知道该怎么做。同样，这是不好的做法/效率低下吗？为什么 redux 不自动配置这个？

【问题讨论】：

标签： reactjs redux react-redux react-hooks

【解决方案1】：

当从useSelector 中选择的值发生变化时，组件将重新呈现。因此，您通常希望选择所需的最少信息量以最大程度地减少重新渲染。

如果state.auth 中有多个属性，而您只关心一个，那么这种解构方法的缺点是，当对象的其他属性发生变化时，它会导致组件重新渲染。在您的示例中，您似乎使用了所有属性，所以这无关紧要。

我认为您将很难在不违反rules of hooks 的情况下使用dispatch 进行自定义操作。钩子不能有条件地调用，必须在组件的顶层调用。您不能在事件处理程序回调、useEffect 函数等内部调用useDispatch（或使用它的自定义挂钩）。

useDispatch 钩子的当前实现意味着每个组件调用一次useDispatch 以基于 react-redux 上下文访问当前存储的dispatch 函数。返回的dispatch 函数是纯函数（不是钩子），可以在任何地方使用。

您可以使用 redux 的 bindActionCreators 将操作绑定到特定商店实例的调度。这听起来像是您正在尝试做的事情，但建议不要这样做。缺点是您在操作和特定商店实例之间创建了不必要的耦合。您将无法使用不同的商店实例进行测试。

【讨论】：