如何在 React Redux 中解构 Redux 状态？

Question

我不明白在 ...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
}
};

Answer 1

通常，假设您有

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 - 它更安全地防止意外错误，并且只有四分之一的代码。

Answer 2

是Spread syntax。在您的情况下，它从对象中获取所有键：值对并将它们组合成一个新对象。希望通过代码片段会更清楚

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

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

Answer 3

所以{...}指的是展开或扩展可迭代元素，举个例子，你不能直接在redux store中改变状态，因此你需要制作一个副本并将新的payload附加到州和 return 州。

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

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

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

如何在 React Redux 中解构 Redux 状态？

How to destructure redux state in react redux?

javascript

node.js

reactjs

redux

react-redux