自定义挂钩，用于从存储中获取数据，如果没有，则调度操作并返回数据

Question

我正在尝试 React hooks API。具体来说，尝试自定义钩子。场景是我有一个用于多个组件的联系人类型的API。在所有这些组件中，我必须检查商店中是否存在联系人类型。如果没有，则调度一个操作。为了避免检查，我写了一个钩子来做同样的事情。它检查存储是否存在数据(如果是(，则返回它。如果不是，则调度一个操作来提取它，并在存储中更新时返回该值。

这是钩子——

export const useContactTypes = () => {
const contactTypesFromStore = store.getState().contacts.types;
const [contactTypes, setContactTypes] = useState(contactTypesFromStore);
useEffect(() => {
if (!contactTypesFromStore) { //contact not in store
store.dispatch({ type: 'FETCH_CONTACT_TYPES' }); //dispatch action to fetch contact types
}
}, []);
store.subscribe(() => {
const newValues = store.getState().contacts.types;
if (contactTypesFromStore !== newValues) {
setContactTypes(newValues);
}
});
return contactTypes;
};

满足要求。但-

1. 还有其他方法吗？
2. 这是编写自定义钩子的最佳方式吗？
3. 我应该担心像这样使用 redux 订阅吗？

Answer 1

无需订阅商店或直接使用商店，您可以使用react-redux中的内置钩子为您处理订阅。

请注意，钩子是在 v7.1.0 中添加

的React-redux hooks

import { useDispatch, useSelector, shallowEqual } from 'react-redux';
export const useContactTypes = () => {
const contactTypes = useSelector(({ contacts }) => contacts.types, shallowEqual);
const disptach = useDispatch();
useEffect(() => {
if (!contactTypes) { // contact not in store
dispatch({ type: 'FETCH_CONTACT_TYPES' }); // dispatch action to fetch contact types
}
}, []);
return contactTypes;
}