Заполнение избыточного состояния ключевыми объектами из конечной точки API

Question

Если я отправлю dispatch(fetchResources()); в компонент, я добавлю эти два объекта в состояние Redux. Когда я снова вызываю функцию, я ожидаю, что два новых объекта из ответа добавляются в список. Вместо этого он создал новый массив для ответа. Как я могу убедиться, что он добавляется в массив вместо того, чтобы каждый раз получать новый массив. (см. изображение)

Интерфейс:

export interface Resource {
    [key: string]: Object[]
}

export interface AddResourceInterface {
    type: typeof ADD_RESOURCE;
    payload: Resource;
}

export type ResourceTypes =
    AddResourceInterface |
    RemoveResourceInterface;

export type AppActions = ResourceTypes;

Действие:

export const addResource = (resource: Resource): AppActions  => ({
    type: ADD_RESOURCE,
    payload: resource
});

export const fetchResources: ActionCreator<ThunkAction<any, any, any, any>> = () => {
    return async (dispatch: Dispatch) => {

        await fetch('http://localhost:3000/authorization')
            .then(res => res.json())
            .then(data => {
                dispatch(addResource(data))
            })
            .catch(err => {
                console.log(err);
            })
    }
};

Редуктор:

const initialState: Resource[] = [];

const resourceReducer = (
    state = initialState,
    action: ResourceTypes
): Resource[] => {
    switch (action.type) {
        case "ADD_RESOURCE":
            return [...state, action.payload];
        default:
            return state;
    }
};

Конечная точка возвращает:

{
  "https://google.com": {
    "enters": "today",
    "scopes": [
      "cloud:user"
    ]
  },
  "https://youtube.com": {
    "enters": "today",
    "scopes": [
      "cloud:user"
    ]
  },
}

Answer 1

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

const resourceReducer = (
    state = initialState,
    action: ResourceTypes
): Resource[] => {
    switch (action.type) {
        case "ADD_RESOURCE":
            return [action.payload];
        default:
            return state;
    }
};

Так return action.payload назначит массив состоянию сейчас. Ранее вы использовали оператор распространения типа [...state, action.payload], поэтому он создаст новый массив с предыдущими значениями и новыми значениями.