在redux中选择一整片是不是不好的做法



我想在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();的操作。在大多数情况下,这更方便,但我不确定这是否是糟糕的做法/效率低下。

我想为dispatch做一些类似的事情(即抽象出useDispatch(((。也许是const setUserWithDispatch = (info) => useDispatch()(info);之类的东西,所以我可以在组件中简单地执行setUserWithDispatch(userInfo),而不必执行useDispatch()dispatch(setUser(userInfo))

理想情况下,我想做const { user, shouldShowLogin, setUser, showLogin, hideLogin } = useAuth();,但我不知道该怎么做。再说一遍,这种做法不好/效率低吗?为什么redux不自动配置?

当从useSelector中选择的值发生更改时,组件将重新发送。因此,您通常希望选择所需的最小信息量,以最大限度地减少重新发送。

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

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

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

您可以使用redux的bindActionCreators将操作绑定到特定存储实例的调度。这听起来像是你想要做的事情,但建议不要这样做。缺点是在操作和特定存储实例之间创建了不必要的耦合。您将失去使用不同存储实例进行测试的能力。

相关内容

  • 没有找到相关文章

最新更新