Не могу понять, почему мой useEffect срабатывает 20 раз, а не один раз

Question

Я строю сайт недвижимости, и у меня есть 20 карт, которые отображаются при первоначальном поиске по городу, которые обернуты в компонент Ссылка следующим образом:

 <Link
          onClick={() => handleClick(propId, listId, propStatus, lat, lon)}
          to={"/"}
          style={{ textDecoration: "none" }}
        >
          <div className="results__card">
            <div className="results__photo-container">
              <div
                className="results__background-photo"
                style={{
                  backgroundImage: `url(${photo})`
                }}
              ></div>
            </div>
            <h3>{price}</h3>
            <h5>{address}</h5>

            <h6>{type}</h6>
          </div>
        </Link>

, чтобы каждое свойство можно было кликать. Затем onClick запускает диспетчеризацию с избыточностью, которая устанавливает необходимые параметры для вызова Api, который мне нужен. Сначала я отображаю состояние на реквизиты, и они проходят через редуктор, как и ожидалось, поэтому я хочу, чтобы мой вызов Api происходил, когда это состояние обновляется, и я использую для этого ловушку useEffect () и устанавливаю массив зависимостей в сопоставленное состояние к реквизиту. этот код выглядит следующим образом:

useEffect(() => {
    if (ids.propId.propId) {
      console.log(ids.propId.propId);
      console.log(ids.propId.propStatus);
      //my api call

    }
  }, [ids]); //this is the state that was mapped to props

Проблема в том, что когда эффект использования срабатывает, как только состояние его изменяет, то по какой-то причине срабатывает 20 раз, когда я хочу, чтобы он срабатывал только один раз, только когда идентификатор состояния состояние изменилось. Есть 20 карт, так что я думаю, что по какой-то причине она срабатывает один раз для каждой карты, но почему? до того, когда у меня было состояние идентификатора, полученное из ловушки useState (), и я использовал идентификаторы как зависимость, это работало отлично. теперь, после того как я изменил состояние через Redux, оно срабатывает 20 раз?

ниже - это мои mapDispatchToProps и mapStateToProps

const mapDispatchToProps = dispatch => ({
  setIds: (propId, listId, propStatus) =>
    dispatch(setIds(propId, listId, propStatus))
});
const mapStateToProps = state => ({
  ids: state.ids
});

export default connect(mapStateToProps, mapDispatchToProps)(Results)

мое действие:

  type: "SET_IDS",
  propId: propId,
  listId: listId,
  propStatus: propStatus
});

и, наконец, вот мой редуктор:

const defaultIds = {
  propId: "",
  listId: "",
  propStatus: ""
};

const idsReducer = (state = defaultIds, action) => {
  switch (action.type) {
    case "SET_IDS":
          return {
              propId: action.propId,
              listId: action.listId,
              propStatus: action.propStatus
          };

    default:
      return state;
  }
};

export { idsReducer as default };

вот где отправка происходит:

const handleClick = (propId, listId, propStatus) => {
    setIds({
      propId,
      listId,
      propStatus
    });

  };