如何从 Redux React 中的对象解构数组？

Question

我正在使用 redux，我想从我从 REDUX 获得的 对象名称 - teamData 解构 teamMembers - Array。这就是我在下面所做的。我只是想确认一下这样做是否正确。

  const teamData = useSelector((state) => state.team.teamData);
  const { description, heading } = teamData;
  const teamMembers = useSelector((state) => state.team.teamData.teamMembers);

Answer 1

如果可能，你应该不做

  const teamData = useSelector((state) => state.team.teamData);
  const { description, heading } = teamData;

此处的代码对 description 和 heading 感兴趣，但您的 useSelector 选择了整个 teamData。现在，如果 teamData 上有第三个属性，假设 winStreak 并且 winStreak 发生变化，您的组件将重新呈现。因为对 winData.teamStreak 的更改导致 winData 更改。您的 useSelector 正在观察 winData 变化。

如果你改为

const description = useSelector((state) => state.team.teamData.description);
const heading = useSelector((state) => state.team.teamData.heading );

当 description 或 heading 更改时，您的组件将仅重新呈现。因为您的 useSelector 现在正在监视这两个属性的变化。它不关心 teamData 是否改变，它只关心 teamData.descriptionorteamData.heading` 是否改变。

所以，在你的情况下你应该这样做

const description = useSelector((state) => state.team.teamData.description);
const heading = useSelector((state) => state.team.teamData.heading );
const teamMembers = useSelector((state) => state.team.teamData.teamMembers );

这里不使用任何解构。如果您必须解构 useSelector 调用的结果，这可能意味着您的 useSelector 调用也在观察您一开始不感兴趣的数据。

如何从 Redux React 中的对象解构数组？

How to destructure an Array from an Object in Redux React?

redux

react-redux

dispatch

destructure