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