Question

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

export const setName = action => {
  return {
    type: "SET_NAME",
    ...action
  };
};

这3个点和减速器在做什么？

Answer 1

Spread语法允许在可能需要零个或多个参数（用于函数调用）或元素（用于数组文字）的位置扩展数组表达式或字符串等迭代，或者在需要扩展的位置扩展对象表达式预期零个或多个键值对（对象文字）。

功能示例：

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

console.log(sum(...numbers));
// expected output: 6

console.log(sum.apply(null, numbers));

带对象的示例

let a = {a: 1};
let b = {...a, b: 2};

console.log(b) //will print {a: 1, b: 2}

把它想象成将一个物体解压缩到另一个物体。

More info

Answer 2

嗯，这是扩展运算符，它保留原始对象并向新对象添加新元素。例如

var colors = ['red', 'green', 'blue'];
var refColors = [...colors, 'yellow'];
//colors=> ['red', 'green', 'blue']
//refColors => ['red', 'green', 'blue', 'yellow']

Answer 3

实际上，我认为此代码是action creator而不是reducer。

三个点是ES6语法糖，称为spread运算符。

它允许您创建对象的副本。

注意：它只会在第一级创建副本。

您的评论案例：

export const setName = action => {

  // return new action object which will passed 
  // to all reducers
  return {
    type: "SET_NAME",

    // unpack action object
    ...action
  };
};

一般情况下，...action＆＃34;解包＆＃34;属性，因此您可以使用所需的新属性值来复制对象。

但是，如果您使用已定义的属性action传递type对象 - 此命令将不再是具有更新类型（"SET_STATE"）值的返回操作。您应该交换这两行以使用新的type返回操作（可能您想这样做，但我确定它不是最佳做法）。

所以，你的输出应该是：

export const setName = action => {
  return {
    ...action,
    type: "SET_NAME",
  };
};

如果您的action对象没有type属性，那么您的代码应该可以正常运行。

希望它会有所帮助。

在我的减速机中有三个点的这个操作符是什么意思？

3 个答案: