Редуктор для асинхронного действия добавляет ответ в объект с тем же именем ключа, что и редуктор

Question

Я создаю асинхронное действие в Redux с Redux-Thunk, и пока действие работает и возвращает данные, когда оно добавляется в состояние, оно помещается в объект с тем же именем, что и редуктор, например так ....

Ключ posts должен иметь только массив элементов, но вместо этого он является объектом с ключом posts.Что может быть причиной этой проблемы?Вот код для асинхронного действия ...

export function getApiData() {
    return dispatch => {
        fetch('https://jsonplaceholder.typicode.com/posts')
          .then(response => response.json())
          .then(json => dispatch(
            {
                type: ActionTypes.GET_API_DATA,
                payload: json
            }
        ))
    }
}

Вот код для редуктора ...

function posts(state = [], action) {
    switch (action.type) {

        case ActionTypes.GET_API_DATA:
            return {
                ...state,
                posts: action.payload,
            }
        default:
            return state
    }
}

Другие ключи, такие как пользователь и призы (которые не являютсяасинхронные действия) работают отлично и новые данные добавляются, как и ожидалось.Что приводит к такому поведению, когда речь заходит о ключе posts и асинхронном действии?

Заранее спасибо.

Answer 1

Ошибка в том, как вы обрабатываете действие в posts редукторе.Вам нужно вернуть массив вместо объекта

function posts(state = [], action) {
    switch (action.type) {

        case ActionTypes.GET_API_DATA:
            return [
                ...state,
                ...action.payload,
            ] // or return action.payload if you don't want to merge data
        default:
            return state
    }
}

Answer 2

Вы уверены, что ответ в правильном формате? Не могли бы вы попробовать подключить отладчик или console.log, чтобы увидеть данные? Или попробуйте отправить для отправки json.data.