在 useEffect 中使用 redux 操作的最佳方法是什么？

Question

我有一个如下所示的 React 组件（省略了某些部分），并且我使用 redux 进行状态管理。该getRecentSheets操作包含 AJAX 请求并将响应分派给 redux，后者会state.sheets.recentSheets使用响应的数据进行更新。

所有这些都按预期工作，但在构建时会抛出有关useEffect 缺少依赖项的警告： 'getRecentSheets'。但是，如果我添加getRecentSheets到 useEffect 的依赖项数组，它就会开始无限期地重新运行，从而冻结应用程序。

useEffect我已阅读有关挂钩的 React 文档https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependency但它没有没有为此类用例提供一个很好的示例。我想这是 useCallback 或 react-redux useDispatch 的东西，但没有例子我不知道如何实现它。

有人可以告诉我在 useEffect 中使用 redux 操作的最简洁和惯用的方法是什么以及如何避免有关缺少依赖项的警告吗？

import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import SheetList from '../components/sheets/SheetList';
import { getRecentSheets } from '../store/actions/sheetsActions';

const mapStateToProps = (state) => {
    return {
        recentSheets: state.sheets.recentSheets,
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        getRecentSheets: () => dispatch(getRecentSheets()),
    }
}

const Home = (props) => {
    const {recentSheets, getRecentSheets} = props;

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

    return <SheetList sheets={ recentSheets } />
};

export default connect(mapStateToProps, mapDispatchToProps) (Home);

Answer 1

毕竟，正确的方法似乎如下：

// ...
import { useDispatch } from 'react-redux';
import { getRecentSheets } from '../store/actions/sheetsActions';

const Home = props => {
    const dispatch = useDispatch();

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

    // ...
};

这样它就不会抱怨getRecentSheets依赖项数组中缺失。正如我从阅读 React doc on hooks 中了解到的那样，这是因为它没有在组件内部定义。虽然我是前端新手，但我希望我没有在这里搞砸一些事情。

Answer 2

我会添加一个检查来查看是否recentSheets存在，并将其用作我的依赖项。

useEffect(() => {
    if (!recentSheets) getRecentSheets();
}, [recentSheets])