使用 react-redux 钩子的版本：

你甚至可以通过使用useDispatchfrom react-redux来完全切断连接功能：

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 保证 dispatch 函数标识是稳定的并且不会在重新渲染时改变。这就是为什么从 useEffect 或 useCallback 依赖项列表中省略是安全的。

您需要传递绑定动作创建者或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();
  }, [])
}

这只是为了对@Alex Hans 的回答进行一些优化。

根据此处的文档。自定义 Hook 是一个 JavaScript 函数，其名称以“use”开头，并且可以调用其他 Hook。

考虑到这一点，我们不需要将调度函数的引用作为参数发送到 useFetching 钩子，而是简单地不发送它，而是简单地从带有适当导入的 useFetching 钩子中使用它。

这是我的意思的摘录。

import { useDispatch } from 'react-redux';

const useFetching = (someFetchActionCreator) => {
    const dispatch = useDispatch()

    useEffect(() => {
    dispatch(someFetchActionCreator());
  }, [])
}

我无法确定这个示例是否适合您的代码库，但只是试图解释这篇文章背后的想法/概念。

希望这对任何未来的人都有帮助。

Alex Hans 对 dispatch 做出了正确的决定，但是为了消除对 api 的请求循环，您可以指定对 dispatch 的依赖（我使用了Redux Toolkit）

  import React, { useEffect } from 'react'
  import { useDispatch } from 'react-redux'
  import axios from 'axios'
  import { getItemsStart, getItemsSuccess, getItemsFailure } from '../features/itemsSlice'

  const fetchItems = () => async dispatch => {
    try {
      dispatch(getItemsStart());
      const { data } = await axios.get('url/api')
      dispatch(getItemsSuccess(data))
    } catch (error) {
      dispatch(getItemsFailure(error))
    }
  }

  const PageA = () => {
    const dispatch = useDispatch()
    const { items } = useSelector(state => state.dataSlice)
   
    useEffect(() => {
       dispatch(fetchItems())
    }, [dispatch])

    return (
      <ul>
         {items.map(item => <li>{item.name}</li>}
      </ul> 
    )
  }
  
  export default PageA

在 useEffect(() => {...}, [dispatch]) 中传递调度的依赖参数很重要

useEffect(() => {
   fetchData();
 }, []);

 async function fetchData() {
   try {
     await Auth.currentSession();
     userHasAuthenticated(true);
   } catch (e) {
     if (e !== "No current user") {
       alert(e);
     }
   }
   dispatch(authentication({ type: "SET_AUTHING", payload: false }));
 }