用于异步操作的Reducer正在将响应添加到与Reducer具有相同键名的对象中

Question

我正在用Redux-Thunk在Redux中创建一个异步动作，当该动作工作并返回数据时，将其添加到状态后，将其放入与reducer同名的对象中，就像这样。

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。