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

【问题标题】：State management with useContext and useReducer and fetching data with useEffect使用 useContext 和 useReducer 进行状态管理并使用 useEffect 获取数据
【发布时间】：2020-06-12 09:26:37
【问题描述】：

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

我的方法如下

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 缺少一个依赖项：'dispatch'。要么...

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

【问题讨论】：

基本可以，但是对这个函数的引用不会改变，所以它实际上是可选的。

标签： reactjs react-hooks react-state-management

【解决方案1】：

这里的警告不是很相关，因为文档建议从 useEffect 的依赖项列表中省略 dispatch，但您可以放心地将其放入依赖项数组中，因为它的标识始终是稳定的。

doc 说：

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

【讨论】：