反应钩子：从 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效果尝试了它，但传奇错过了动作。

Answer 1

使用 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 的建议从自定义钩子中删除调度

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

Answer 2

您需要通过其中有时限的行动的创作者或引用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();
  }, [])
}

Answer 3

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

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

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

这是我的意思的摘录。

import { useDispatch } from 'react-redux';

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

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

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

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

Answer 4

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]) 中传递调度的依赖参数很重要

Answer 5

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 }));
 }