如何在 React redux 中解构 redux 状态？答案

【问题标题】：How to destructure redux state in react redux?如何在 React redux 中解构 redux 状态？
【发布时间】：2022-01-17 05:36:10
【问题描述】：

我不明白在...state 中使用... 的意义。当我看过 react redux 的教程时，他们提到它是状态变量的解构，但你能解释一下提到的观点吗？

export const productreducer=(state=initialstate,{type,payload})=>{

switch(type)
 case ActionTypes.SETPRODUCTS:
     return{...state,...payload}; //here I have a doubt
 default:
     return state
}
};

【问题讨论】：

spread ... 语法可以轻松覆盖和添加新属性并删除现有属性。它还创建了一个新对象，所以 oldState !== newState 但 oldState['unchange'] === newState['unchanged']

标签： javascript node.js reactjs redux react-redux

【解决方案1】：

所以 {...} 是指扩展或扩展可迭代元素，举个例子，您不能直接在 redux 存储中更改状态，因此您需要复制并将新的有效负载附加到状态并返回状态。

状态={ x:1, y:2 } 有效载荷={ y:5 , z:6 }

{...state, ...payload} // { x: 1, y: 5, z: 6 }

这会将旧状态更新为新状态。

【讨论】：

【解决方案2】：

一般来说，假设你有

const a = { foo: 1, bar: 2 }

那么下面两个是等价的：

return { foo: a.foo, bar: b.bar }

和

return { ...a }

本质上，... 将旧对象中的所有元素复制到新对象中。

也就是说，现代 Redux 并没有这样做。现代 Redux 也不做 switch..case reducers、ACTION_TYPES 或 connect。您可能一直在学习一个非常过时的教程。

我真的建议您遵循官方的 Redux Essentials 教程，该教程将从一开始就教您现代 Redux - 它对意外错误更安全，并且只有四分之一的代码。

【讨论】：

【解决方案3】：

它是Spread syntax。在您的情况下，它从对象获取所有键：值对并将它们组合成一个新对象。希望用 sn-p 会更清楚

const state = {a: 1, b: 2}
const payload = {c: 3, d: 4}

const result = {...state, ...payload}
console.log(result)

【讨论】：