reactjs - 使用 useContext 和 useReducer 进行状态管理并使用 useEffect 获取数据

Question

我有一个 React 应用程序，它使用 useContext 和 useReducer 管理其全局状态。我的 BookList组件在挂载时需要从服务器获取书籍。如果获取书籍成功，它们应该存储到全局状态。

我的方法如下

function BookList() {
    const [state, dispatch] = useContext(BookContext);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        BookService
            .fetchBooks()
            .then(resp => {
                setLoading(false);
                dispatch({
                    type: FETCH_BOOKS,
                    books: resp.data
                });
            });
    }, []);

    return (
        <div>
            {loading
                ? "Loading ..."
                : state.books.map(book => (
                    <div key={book.id}>{`${book.title} - $${book.price}`}</div>))
            }
        </div>
    );
}

这有效但会产生警告

React Hook useEffect has a missing dependency: 'dispatch'. Either ...

我是否必须添加 dispatch到依赖数组来消除警告还是有更好的方法？

Answer 1

警告在这里不是很相关，因为文档建议省略 dispatch来自 useEffect 的依赖项列表，但是您可以安全地将其放入依赖项数组中，因为它的身份始终是稳定的。
doc说:

React guarantees that dispatch function identity is stable and won’t change on re-renders.
This is why it’s safe to omit from the useEffect or useCallback dependency list.