Question

据我了解，这是散布运算符的工作方式：

x=[1,2,3];

y=[...x,4,5];

//这与y = [1,2,3,4,5]

const initialState={
  ingredients: [
    new Ingredient('Apples', 5),
    new Ingredient('Tomatoes', 10),
  ]
};
export function shoppingListReducer( state=initialState, action:ShoppingListActions.ShoppingListActions ) {
  switch(action.type) {
    case ShoppingListActions.ADD_INGREDIENT:
      return {
        ...state,
        ingredients:[...state.ingredients,action.payload ]
      }

    default:
      return state;
  }

在上面的示例中，

return {
  ...state,
  ingredients:[...state.ingredients,action.payload ]
}

评估为？

有效载荷属于成分类型：

export class Ingredient {
  constructor(public name: string, public amount: number) {}
}

Answer 1

基本上，您正在尝试创建具有state对象的所有属性的对象，并使用ingredients数组中的所有值以及{{1}覆盖其属性state.ingredients }。可以这样做以将结果对象的引用与状态对象分开。

action.payload

或者，为了更好地理解它，您可以将其分解为以下内容

var state = {
  "someprop" : "somevalue",
  "ingredients" : ["a", "b"]
};

var action = {
  "payload" : 4
};

var result = {
  ...state,
  ingredients:[...state.ingredients,action.payload ]
};
state.someprop = "somevalue1"; // does not alter result object
state.ingredients.push("c"); // does not alter result object
console.log(result);

注意：如果var result = {...state}; result.ingredients = [...state.ingredients, action.payload];中存在嵌套对象或state中存在对象，它们仍将继续共享相同的引用。

Answer 2

在对象内部使用时，将其视为object.assign。将原始状态添加到对象中，然后添加下一个内容（成分），并在必要时覆盖已经存在的任何内容（成分），等等。

有人可以在以下示例中解释... spread运算符的用法吗？

2 个答案: