React hooks：从 useEffect 调度动作

Question

我的文件夹结构：

 |--App
  |--Components
    |--PageA.js
    |--PageB.js
    |--PageC.js
  |--common-effects
    |--useFetching.js

我正在重构我的代码以使用 react hooks 从 API 获取数据。我想从 useFetching.js 中的 useEffect 发送一个被 saga 中间件拦截的动作。仅当组件（ PageA 、 PageB 、 PageC ）挂载时才应分派该操作。

我正在使用 redux 、 react-redux 和 redux-saga 。

页面A.js ：

 function(props) {
  useFetching(actionParams)
  //....//
}

PageB 和 PageC 组件的类似代码。

我已经抽象出可重用代码以在 useFetching Custom hook 中获取数据。

使用Fetching.js

 const useFetching = actionArgs => {
  useEffect( () => {
    store.dispatch(action(actionArgs)); // does not work
  })
}

我不知道如何在 useFetching 中访问 redux dispatch 。我尝试了 useReducer 效果，但 sagas 错过了动作。

原文由 HarshvardhanSharma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要将绑定的动作创建者或对 dispatch 的引用传递给您的挂钩。这些将来自连接的组件，就像您通常使用 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();
  }, [])
}

原文由 markerikson 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 react-redux 钩子的版本：

您甚至可以使用 react-redux 中的 useDispatch 完全切断连接功能：

 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 的建议从自定义挂钩中删除了 dispatch

注意： React 保证调度函数标识是稳定的并且不会在重新渲染时改变。这就是为什么可以安全地从 useEffect 或 useCallback 依赖项列表中省略的原因。

原文由 Alex Hans 发布，翻译遵循 CC BY-SA 4.0 许可协议