将useSelector移动到辅助函数或自定义挂钩

Question

我正在进行一些useSelector调用，这些调用返回用于填充HIERARCHY对象的数组。

const MyComponent = () => {
const one = useSelector(getArrayByName("Name1"));
const two = useSelector(getArrayByName("Name2"));
const three = useSelector(getArrayByName("Name3"));
const HIERARCHY = {
Levels: {
Name1: one.map(({ Name }) => Name),
Name2: two.map(({ Name }) => Name),
Name3: three.map(({ Name }) => Name)
},
};
// Use HIERARCHY
return ( … )
}

然而，在不同的组件中重复这种情况是非常令人讨厌的。理想情况下，我希望将HIERARCHY存储在助手文件或自定义挂钩中一次，并将已填充的HIERARCHY版本导入到任何组件中。

我不知道如何构造这个自定义挂钩或助手文件，因为包含useSelector调用的功能组件返回JSX，而不是填充的JavaScript对象。有什么想法可以提取useSelector调用并将HIERARCHY对象填充到外部文件中吗？

我想要什么：

import { HIERARCHY } from "./hierarchy_helper.js";
const MyComponent = () => {
// Use HIERARCHY
return ( … )
}

Answer 1

自定义钩子是一个函数(传统上以use…开始(，它可以返回任何您想要的东西(在您的情况下，HIERARCHY对象(，也可以调用其中的其他钩子

https://reactjs.org/docs/hooks-custom.html

在你的情况下，你可以这样做：

使用MyCustomHook.js

const useMyCustomHook= () => {
const one = useSelector(getArrayByName("Name1"));
const two = useSelector(getArrayByName("Name2"));
const three = useSelector(getArrayByName("Name3"));
const HIERARCHY = useMemo({
Levels: {
Name1: one.map(({ Name }) => Name),
Name2: two.map(({ Name }) => Name),
Name3: three.map(({ Name }) => Name)
},
}, [one, two, three]);
return HIERARCHY;
}

MyComponent.jsx

const MyComponent = () => {
const HIERARCHY = useMyCustomHook();
// Use HIERARCHY
return ( … )
}