是否可以为 useSelector 创建一个可重用的函数？

Posted 2023-02-19

【中文标题】是否可以为 useSelector 创建一个可重用的函数？

【英文标题】：Is it possible to create a reusable function for useSelector?

【发布时间】：2022-01-14 20:06:17

【问题描述】：

我很好奇是否有办法在redux 中重用useSelector，因为我在不同的屏幕上多次使用它。

我尝试像这样创建一个selector.ts 文件，但它不起作用，因为它不在商店内，也不是功能组件。知道如何重用此代码吗？

export const branch = useSelector((state: any) => state.branchReducer.branch);

【问题讨论】：

您可以创建 customHooks，它会始终为您返回该值。

***.com/questions/61414860/…

您可能对createSelector感兴趣

【参考方案1】：

您可以将选择器函数粘贴到文件中，然后让每个组件导入选择器并将其传递给 useSelector：

// selectors.ts
export const branchSelector = (state: any) => state.branchReducer.branch;

// used like:
import  branchSelector  from './some/path'
const Example = (props) => 
  const branch = useSelector(branchSelector);
  // ...

或者您可以创建自定义钩子并使用它们：

// selectorHooks.ts
export const useBranch = () => useSelector((state: any) => state.branchReducer.branch);

// used like:
import  useBranch  from './some/path';
const Example = (props) => 
  const branch = useBranch();
  // ...