Как убрать бесконечные запросы к API?

Question

[yumakaev]

Здравствуйте!
Пытаюсь сделать поиск по элементам, которые получаю по АПИ.
С помощью useEffect подключаюсь к service.js (getAllPerson), далее, ответ отдаю heroesApiLoaded (это action), после, редюсер добавляет данные в массив, который я беру из mapStateToProps (apiHeroes), в state (values) записываю значение из инпута и сравниваю его с apiHeroes.

Мой useEffect:

useEffect(() => {
		apiService.getAllPerson()
		.then(data => heroesApiLoaded(data))
	}, [apiHeroes])

Мой reducer:

const initialState =  {
	promoHeroes: [],
	apiHeroes: [],
	promoLoader: true
};

const reducer = (state = initialState, action) => {
	switch(action.type) {
		case "HEROES_PROMO_LOADED":
			return {
				apiHeroes: [],
				promoHeroes: action.payload,
				promoLoader: false
			};
		case "HEROES_API_LOADED":
			return {
				apiHeroes: action.payload,
				promoHeroes: action.payload,
				promoLoader: false
			}
		default: 
			return state;
	};
};

export default reducer;

service.js

export default class ApiService {
	_url = 'https://swapi.co/api';
	async ApiGetContent(fullUrl) {
		const request = await fetch(`${this._url}${fullUrl}`);

		if(!request.ok) {
			throw new Error(`Ошибка:${request.status}`)
		}
		return await request.json();
	}

	getAllPerson = async () => {
		const res = await this.ApiGetContent(`/people/`);
		return res.results.map(this.transformPerson);
	}

	_extractId(item) {
		const idRegExp = /\/([0-9]*)\/$/;
		return item.url.match(idRegExp)[1];
}

	transformPerson = (res) => {
		return {
				id: this._extractId(res),
				name: res.name,
				gender: res.gender,
				mass: res.mass
		};
	};
};

Answer 1

[hzzzzl]

useEffect(() => {
apiService.getAllPerson()
.then(data => heroesApiLoaded(data))
}, [apiHeroes]) <- useEffect вызывается каждый раз, когда apiHeroes меняется, а меняется она каждый раз когда вызывается useEffect