Question

在react-redux中，每个人都使用散布运算符返回现有状态，然后添加新的有效负载，例如[...state,action.payload ]，但是我遇到的情况是在化简器中，它们直接返回action.payload，我是无法理解它们之间的区别。

我的减速器看起来像这样：

export default (state = [], action) => {
     switch(action.type){
        case 'FETCH_POSTS':
            return action.payload; //I have doubt here
        default:
            return state;
     }

}

如果我将return语句作为return [...state,action.payload ]放入该怎么办。您能告诉我两者的区别吗？

我已经在Google上搜索并尝试实现上述两种情况，但我对它的理解不正确。

Answer 1

这完全取决于action.payload包含什么以及action是什么。

在这种情况下：

export default (state = [], action) => {
     switch(action.type){
        case 'FETCH_POSTS':
            return action.payload;
        default:
            return state;
     }

}

action.payload可能包含一组来自后端API的对象。这是可以接受的，因为您的原始状态要接受一个数组，其中包含有关所有帖子的信息。满足阵列要求。

在这种情况下：

export default (state = [], action) => {
     switch(action.type){
        case 'ADD_POST':
            return [...state, action.payload]; 
        default:
            return state;
     }

}

该ADD_POST动作将新数据附加到现有状态。但是，在这种情况下，action.payload是单个对象{}。如果您只返回了action.payload，则您的状态将只有该对象{}。他们使用spread operator [...]的原因是为了使他们可以保留状态中已经存在的帖子。您想保留旧帖子，然后将新帖子添加到数组中。

最后，您可以将它们都压缩为：

export default (state = [], action) => {
     switch(action.type){
        case 'FETCH_POSTS':
            return action.payload; //get list from API, payload is an array
        case 'ADD_POST':
            return [...state, action.payload] //add new post to end of list, payload is an object.
        default:
            return state;
     }

}

react-redux减速器中的散布算子和不散布算子之间的区别

1 个答案: