Блог

Главная - Вопросы по программированию - Как предотвратить ненужный вызов API в React useEffect?

Как предотвратить ненужный вызов API в React useEffect?

#javascript #reactjs #redux #react-hooks #reselect

#javascript #reactjs #сокращение #реагирующие хуки #повторный выбор

Вопрос:

Мой HomeScreen компонент содержит вызов API для получения текущего пользователя. Есть ли способ заставить его вызывать API, ТОЛЬКО если пользователь изменился. На данный момент, если я отойду от экрана, а затем вернусь, он вызовет API и отобразит загрузчик, который, я думаю, не является идеальным для пользователя, не говоря уже о том, что запрос API полностью избыточен, поскольку пользователь не изменился.

 useEffect(() => {
    dispatch(userRequest({ userId, userRole }))
}, [dispatch, userId, userRole])

Я также пытался использовать reselect для получения userId и userRole из Redux и обертывания моего HomeScreen компонента в React.memo , но, похоже, он каждый раз перенаправляется

Вот как я получаю данные из Redux 

 const userId = useSelector(selectUserId)
const userRole = useSelector(selectUserRole)

Мои селекторы:

 const loginInfoSelector = (state: AppStateType) => state.loginInfo

export const selectUserId = createSelector(
  loginInfoSelector,
  (loginInfo) => loginInfo.id
)
export const selectUserRole = createSelector(
  loginInfoSelector,
  (loginInfo) => loginInfo.role
)

Комментарии:

1. if(!userExists(userId,userRole)) { fetch() } ? Использование reselect и memo не имеет ничего общего с вашими вызовами API… Поставьте условие в свой запрос API

2. Почему вы хотите добавить dispatch к зависимостям useEffect() ?

3. Проверьте, есть ли у вас данные для пользователя. Если нет, то только сделайте вызов. Это лучший способ ограничить вызовы API. reselect и memo whole очень помогают с вызовом API.

Ответ №1:

Я бы попытался удалить dispatch из массива зависимостей как:

 useEffect(() => {
   dispatch(userRequest({ userId, userRole }))
}, [userId, userRole])

Таким образом, он запускается только один раз userId или userRole изменяется.