Управление состоянием с помощью 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>
    );
}

Это работает, но выдает предупреждение

Реагировать У хука useEffect отсутствует зависимость: «диспетчеризация». Либо ...

Нужно ли добавлять dispatch в массив зависимостей, чтобы избавиться от предупреждения, или есть лучший способ?

Answer 1

Предупреждение здесь не очень актуально, так как do c предлагает исключить dispatch из списка зависимостей useEffect и useReducer, но вы можете смело помещать его в массив зависимостей, поскольку идентификатор объекта dispatch функция useReducer всегда стабильна.

do c говорит:

React гарантирует, что dispatch идентификатор функции стабилен и не изменится при повторном рендеринге.
Вот почему можно не указывать в списке зависимостей useEffect или useCallback.