更新商店属性

debugcn 发表于 Dev

桑托什

我收到来自 API 的响应，如下所示：

{
    "results": {
        "6": {
            "id": 6,
            "name": "akkha madrasi mirchi1",
        },
        "7": {
            "id": 7,
            "name": "almonds",
        },
        "8": {
            "id": 8,
            "name": "alu1",
        }
    }
}

我将response.results结果存储在 reducer store {} 中，以便我可以results作为store.results. 我想修改results. API 仅返回更新后的对象。现在我想id: 6在 store.results 中更新。

{
    "results": {
        "6": {
            "id": 6,
            "name": "Modified akkha madrasi mirchi1",
        }
    }
}

如果我在results减速器中这样做：

[...state,action.response]

带有键6的对象会替换带有匹配键的对象吗？

我期望状态为（注意名称更改为Modified akkha madrasi mirchi1for id: 6）：

"results": {
    "6": {
        "id": 6,
        "name": "Modified akkha madrasi mirchi1",
    },
    "7": {
        "id": 7,
        "name": "almonds",
    },
    "8": {
        "id": 8,
        "name": "alu1",
    }
}

我希望对象即使嵌套也能更新。只需匹配密钥并继续更换。

富有的丘奇

如果我在结果减速器中这样做：
[...state,action.response]
键为 6 的对象会替换键匹配的对象吗？

不。如果您的状态是一个数组，这就是您可能使用的，但从您提供的信息来看，它是一个对象（所有results都是以 ids 作为键的对象）。

您可能正在寻找的是这样的：

return {
  ...state,
  ...action.response.results
}

这将创建状态的浅拷贝，保留每个结果项的对象引用（如果不需要，则比执行深拷贝更有效）。然后它将id: 6用中的任何内容覆盖前一个response.results。

关于这一点，需要记住以下几点：

它假设您有可用的对象传播。如果没有，Object.assign({}, state, action.response.results)将产生相同的效果，但（恕我直言）不太清楚。
从服务器返回的任何内容都将完全替换您在id: 6. 这意味着如果您正在跟踪客户端中该 id 的各种状态，或者服务器没有返回您需要的所有内容，您可能会得到一些意想不到的结果。

const state = {
  6: {
    id: 6,
    name: 'akkha madrasi mirchi1'
  },
  7: {
    id: 7,
    name: 'almonds'
  },
  8: {
    id: 8,
    name: 'alu1'
  }
}
const response = {
  results: {
    6: {
      id: 6,
      name: 'Modified akkha madrasi mirchi1'
    }
  }
}

console.log({
  ...state,
  ...response.results
})

为了完整起见，如果您具有注释线程中描述的嵌套结构，您将如何减少它：

const state = {
  results: {
    6: {
      id: 6,
      name: 'akkha madrasi mirchi1'
    },
    7: {
      id: 7,
      name: 'almonds'
    },
    8: {
      id: 8,
      name: 'alu1'
    }
  }
}
const response = {
  results: {
    6: {
      id: 6,
      name: 'Modified akkha madrasi mirchi1'
    }
  }
}

console.log({
  ...state,
  results: {
    ...state.results,
    ...response.results
  }
})

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。