React Hooks：useEffect中的调度动作

Question

我的文件夹结构：

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

我正在使用react hooks重构我的代码以从API获取数据。我想调度由 saga* 中间件截获的 useFetching.js 中的
useEffect 操作。仅当安装了组件（ PageA ， PageB ， PageC ）时才分派该动作。
* __

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

PageA.js ：

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

PageB 和 PageC 组件的类似代码。

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

useFetching.js

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

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

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();
  }, [])
}