React-Redux: очистить государство

Question

В моем приложении я делаю два связанных перехода. При первом получении я получаю все идентификаторы, когда выбирается один из этих идентификаторов, он используется для создания нового вызова API, который возвращает мне некоторые данные.

Так что после первого получения у меня возникает такая ситуация: :

docent:  (2) [{…}, {…}]
          0: {id: "12", name: "Name1", surname: "Surname1"}
          1: {id: "13", name: "Name2", surname: "Surname2"}
          length: 2__proto__: Array(0)

agenda:  []

после того, как пользователь выберет один из идентификаторов, массив повестки дня также заполняется информацией, полученной в соответствии с этим идентификатором, например:

agenda:   (2) [{…}, {…}]
          0: {id: "1", docent_id: "12", date: "2020-05-27", start_at: "09:00:00", end_at: "10:00:00"}
          1: {id: "2", docent_id: "12", date: "2020-05-27", start_at: "10:00:00", end_at: "11:00:00"}
          length: 2

Моя проблема заключается в следующем: если пользователь снова меняет идентификатор массива docent , массив повестки дня становится:

agenda:  (3) [{…}, {…}, {…}]
         0: {id: "1", docent_id: "12", date: "2020-05-27", start_at: "09:00:00", end_at: "10:00:00"}
         1: {id: "2", docent_id: "12", date: "2020-05-27", start_at: "10:00:00", end_at: "11:00:00"}
         2: {id: "3", docent_id: "13", date: "2020-05-28", start_at: "09:00:00", end_at: "10:00:00"}
         length: 3

Таким образом, у меня есть информация о прошлом и новая информация.

Я хотел бы иметь возможность удалить информацию, сохраненную в повестке дня, в случае, если пользователь изменит идентификатор доцента. Как мне это сделать?

Действия:

export const agendaList = (id, agenda) => {
    return (dispatch) => {
        fetch(api + id, {
            headers: {
                Accept: "application/json",
            },
        })
            .then((result) => result.json())
            .then((agenda) => {
                dispatch({
                    type: "AGENDA_LIST",
                    agenda: agenda
                });
            })
            .catch((error) => console.log("An error occurred.", error));
    };

Редукторы:

const initialState = {
agenda: []
}
export const reducer = (state = initialState , action) => {
case 'AGENDA_LIST':
            return {...state, agenda: [...state.agenda, ...action.agenda]};
        default: 
            return state;
    }

Answer 1

Ваш редуктор объединяет текущее состояние и данные действия:

return {...state, agenda: [...state.agenda, ...action.agenda]};

Вы хотите заменить текущую повестку дня состояния:

return {
  ...state,
  agenda: action.agenda
};