时间戳

首页 > 解决方案 > reducer 如何处理具有重复键的对象？

javascript - reducer 如何处理具有重复键的对象？

问题描述

使用 Redux 学习 React，课程作者写道：

export default (state = [], action) => {
  switch (action.type) {
    case FETCH_STREAM:
      return { ...stream, [action.payload.id]: action.payload };
    case CREATE_STREAM:
      return { ...stream, [action.payload.id]: action.payload };
    case EDIT_STREAM:
      return { ...stream, [action.payload.id]: action.payload };
    default:
      return state;
  }
};

据我了解，该{ ...stream, [action.payload.id]: action.payload }模式是一种JavaScript称为“键插值语法”的新语法，它的作用是向我们的对象添加一个新语法key/value（我们首先使用语法制作了它的副本spread ...）所以在这种情况下我会这样做理解CREATE_STREAM一个，但怎么样EDIT_STREAM？它会因为钥匙已经在那里而更换钥匙吗？还是会盲目地添加它，然后复制密钥？我也完全不明白FETCH_STREAM。为什么会变成这样？它不应该只是一个return action.payload吗？

标签： javascriptreactjsredux

解决方案

实际上，如果键不存在，键插值语法将添加该键，但如果它是重复的，则会覆盖其值。

以下代码

const personA = {
  name: 'John Doe',
  age: 42
};

const createdProp = 'country';
const overriddenProp = 'age';

const personB = {
  ...personA,
  [createdProp]: 'USA',
  [overriddenProp]: 50
};

将导致personB这些值

{
  name: "John Doe",
  age: 50,
  country: "USA"
}

关于FETCH这取决于他们的意图。如果展开操作被移除，那么之前的所有数据都将丢失。如果这没问题，您就可以{ [action.payload.id]: action.payload }放心了。

推荐阅读