Question

我想创建自定义钩子，以从可重复使用的代码中删除很多样板。

我的redux设置涉及许多组合的reducer，因此使用useSelector中的react-redux获取redux值需要大量样板代码。

假设我的admin内有一个rootReducer减速器。我可以得到其中一个值，如下所示：

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

您不需要定制罩。详细了解reselect或类似内容。如果您不需要任何库，只需编写自定义选择函数

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

并使用它

const val1 = useSelector(selectVal1);

更新

这怎么办？。

[JS]

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

[TS]

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

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

2 个答案: