我的文件夹结构：
|--App
|--Components
|--PageA.js
|--PageB.js
|--PageC.js
|--common-effects
|--useFetching.js
我正在使用反应钩子重构我的代码以从 API 获取数据。我想从useEffect调度一个动作，在useFetching中.js它被saga中间件截获。仅当组件（页 A、页 B、页 C）挂载时，才应调度该操作。
我用的是redux，react-redux，redux-saga。
第A.js页：
function(props) {
useFetching(actionParams)
//....//
}
页面 B 和页面 C 组件的类似代码。
我已经抽象了可重用代码以在useFetchingCustom钩子中获取数据。
使用获取.js
const useFetching = actionArgs => {
useEffect( () => {
store.dispatch(action(actionArgs)); // does not work
})
}
不知道如何在useFetching中访问redux dispatch。我用< code>useReducer效果试了一下，但是sagas错过了动作。
您甚至可以使用react-redux中的useDis香味完全切断连接函数：
export default function MyComponent() {
useFetching(fetchSomething);
return <div>Doing some fetching!</div>
}
使用您的自定义钩子
import { useDispatch } from 'react-redux';
const useFetching = (someFetchActionCreator) => {
const dispatch = useDispatch();
useEffect(() => {
dispatch(someFetchActionCreator());
}, [])
}
编辑：按照@yonga-springfield的建议从自定义挂钩中删除调度
注意：React 保证调度函数身份是稳定的，并且在重新渲染时不会改变。这就是为什么从 useEffect 或 useCallback 依赖项列表中省略是安全的。
您需要将绑定的操作创建者或对调度的引用传递给您的钩子。这些将来自连接的组件，与您通常使用React-Redux相同：
function MyComponent(props) {
useFetching(props.fetchSomething);
return <div>Doing some fetching!</div>
}
const mapDispatch = {
fetchSomething
};
export default connect(null, mapDispatch)(MyComponent);
然后钩子应该在效果中调用绑定的动作创建者，这将相应地调度动作。
此外，请注意，您当前的钩子将在每次重新渲染组件时重新运行效果，而不仅仅是第一次。您需要像这样修改挂钩:
const useFetching = someFetchActionCreator => {
useEffect( () => {
someFetchActionCreator();
}, [])
}
这只是为了给汉斯@Alex答案带来一些优化。
根据此处的文档。自定义 Hook 是一个 JavaScript 函数，其名称以 “use” 开头，可以调用其他 Hook。
考虑到这一点，我们不需要将对调度函数的引用作为参数发送到 useFetching 钩子，而是简单地不发送它，而是简单地从 useFetching 钩子中使用它并进行适当的导入。
下面节选一下我的意思。
import { useDispatch } from 'react-redux';
const useFetching = (someFetchActionCreator) => {
const dispatch = useDispatch()
useEffect(() => {
dispatch(someFetchActionCreator());
}, [])
}
我无法确定这个例子在你的代码库中没有错误，但只是试图解释这篇文章背后的想法/概念。
希望这对任何未来的来者有所帮助。
