如何使用TypeScript创建修改后的useSelector自定义挂钩

Question

我想创建自定义挂钩，从可重用代码中删除大量样板。

我的redux设置涉及一组组合的reducer，因此使用useSelector从react-redux获得redux值需要相当多的样板代码。

假设我的rootReducer里面有一个admin减速器。我可以得到它的一个值如下：

const MyComponent: FC = () => {
const value = useSelector<IRootReducer, boolean>(
({ admin: { val1 } }) => val1
)
// rest of code
}

我想在上面的实现的基础上创建一个自定义钩子useAdminSelector，这样它就可以如下使用：

const value = useAdminSelector<boolean>(({ val1 }) => val1)

在实现的定义中，我也想实现我的IAdminReducer接口。

这是我的尝试：

export function useApplicantSelector<T>((applicantState: IApplicant): T => (retVal)): T {
return useSelector<IReducer, T>((state) => (state.applicant)) 
}

但这种解决方案显然在语法上是不正确的。

Answer 1

怎么样

export const useAdminSelector = <T>(adminSelector: (adminState: IAdminReducer) => T) => {
return useSelector((state: IRootReducer) => adminSelector(state.admin))
}

然后

const value = useAdminSelector<boolean>(({ booleanVal }) => val1)

如果我正确理解你，我认为这应该能解决你的问题：(

Answer 2

您不需要自定义引擎盖。阅读有关重新选择或类似内容的更多信息。如果你不想要任何库-只需编写你的自定义选择函数

const selectVal1 = ({ admin }: IRootReducer) => admin.val1;

并使用

const val1 = useSelector(selectVal1);

更新

这个怎么样？。

[JS]

const useAdminState = (key) => useSelect((state) => state.admin[key]);

const useAdminState = (key: keyof IRootReducer['admin']) => useSelect(({ admin }: IRootReducer) => admin[key]);