Реквизит с одинаковым именем объекта на нескольких страницах сайта

Я пытаюсь понять, как именно реагировать на сохранение данных из реквизита.

Мой пример:

1. Я открываю страницу 1 и получаю реквизиты с объектами Automat.
2. Я перехожу на страницу 2 и получаю реквизиты с объектами Automat, но они разные (другое действие).

Проблема в том, что когда я перехожу на страницу 2 или любую другую, реквизит с первой страницы все еще существует, а мои данные неверны. В этой ситуации единственный способ избавиться от них — обновить страницу или вызвать функцию, но это неправильный путь. В этой ситуации я должен как-то сначала удалить Automat Props на странице 1, или, может быть, на каждой странице вызов get Props с уникальным именем (но это, я думаю, бессмысленно)?

Я получаю данные из Java (SpringBoot) и Hibernate.

страница 1

////// получить все автоматы - вернуть список всех автоматов в базе данных

  componentDidMount() {
    this.props.getAutomats();
  }


export const getAutomats = () => async (dispatch) => {
  const res = await axios.get("/api/automat/all");
  dispatch({
    type: GET_AUTOMATS, //typ reducera
    payload: res.data, //dane z bazy
  });
};

пример json

[
    {
        "id": 1,
        "name": "zimny jeden",
        "serialNumber": "123456",
        "type": "2",
        "deleted": 0,
        "status": null,
        "productionDate": null,
        "fundsDrawns": []
    },
    {
        "id": 2,
        "name": "",
        "serialNumber": "",
        "type": "Zimny",
        "deleted": 0,
        "status": null,
        "productionDate": "2021-00-08",
        "fundsDrawns": []
    }
]

затем перейдите на страницу 2

////// получить все автоматы, которые не используются

componentDidMount() {
        this.props.getAutomatFree();
      }


export const getAutomatFree = () => async (dispatch) => {
  const res = await axios.get("/api/automat/all/free");
  dispatch({
    type: GET_AUTOMATS, //typ reducera
    payload: res.data, //dane z bazy
  });
};

пример json

[
    {
        "id": 1,
        "name": "zimny jeden",
        "serialNumber": "123456",
        "type": "2",
        "deleted": 0,
        "status": null,
        "productionDate": null,
        "fundsDrawns": []
    }
]

Обе страницы возвращают реквизиты с автоматами типа Object, но когда я перехожу со страницы 1 на страницу 2, я вижу два или даже три автомата (сумма страниц 1 и 2) вместо одного.

Изменить: редуктор

    import { GET_AUTOMAT, GET_AUTOMATS, DELETE_AUTOMAT } from "../actions/types";

const initialState = {
  automats: [], //array
  automat: {} //single
};

export default function(state = initialState, action) {
  switch (action.type) {
    case GET_AUTOMATS:
      //...state - Adds old state properties to the new object by copying
      return {
        ...state,
        automats: action.payload // dane z listą projektów, które zaktualizują state
      };

    case GET_AUTOMAT:
      return {
        ...state,
        automat: action.payload
      };

    case DELETE_AUTOMAT:
      return {
        //jeżeli delete się uda to ma odświeżyć poprzez odfiltrowanie usuniętego obiektu
        //zwraca do wyswietlenia projekty sprzeczne z action.payload (id do skasowania)
        ...state,
        automats: state.automats.filter(
          automat => automat.serialNumber !== action.payload
        )
      };
    default:
      return state;
  }
}