在 useEffect 中使用 redux action 的最佳方法是什么? [英] What is the best way to use redux action in useEffect?

问题描述

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

I have a React Component like shown bellow (some parts are ommited) and I'm using redux for state management. The getRecentSheets action contains an AJAX request and dispatches the response to redux which updates state.sheets.recentSheets with the response's data.

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

All this works as expected, but on building it throws warning about useEffect has a missing dependency: 'getRecentSheets'. But if I add getRecentSheets to useEffect's dependency array it starts to rerun indefinitely and thus freezes the app.

我已经阅读了关于 useEffect 钩子的 React 文档https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies 但它没有为这种用例提供​​一个很好的例子.我想这与 useCallback 或 react-redux useDispatch 有关，但没有示例，我不确定如何实现它.

I've read React documentation about the useEffect hook https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies but it doesn't provide a good example for such usecase. I suppose it is something with useCallback or react-redux useDispatch, but without examples I'm not sure how to implement it.

谁能告诉我在 useEffect 中使用 redux action 的最简洁和惯用的方法是什么，以及如何避免有关缺少依赖项的警告?

Can someone please tell me what the most concise and idiomatic way to use redux action in useEffect would be and how to avoid warnings about missing dependencies?

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

推荐答案

毕竟正确的做法似乎是这样的:

After all, it seems that correct way will be as follows:

// ...
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 中了解到的那样，这是因为它没有在组件内部定义.虽然我是前端新手，但我希望我没有在这里搞砸.

This way it doesn't complain about getRecentSheets missing in dependencies array. As I understood from reading React doc on hooks that's because it's not defined inside the component. Though I'm new to frontend and I hope I didn't mess something up here.

这篇关于在 useEffect 中使用 redux action 的最佳方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！