Как деструктурировать массив из объекта в Redux React?

Question

Я использую редукцию и хочу деструктурировать teamMembers — массив из имени объекта — teamData , который я получаю от REDUX. Это то, что я сделал ниже. Я просто хочу подтвердить, правильно ли это.

        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;

Ваш код здесь интересует и , но ваш выбирает весь . Теперь, если есть третье свойство на , скажем, и что winStreakизменения, ваш компонент будет перерисован. Потому что это изменение на winData.teamStreakвызвало изменение. А ты смотришь winDataдля изменений.

Если вы вместо этого сделаете

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

ваш компонент будет перерисовываться только тогда, когда descriptionили же headingсдача. Потому что теперь вы следите за изменениями этих двух свойств. Неважно, если teamDataизменяется, важно только, если teamData.description orизменение teamData.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вызов также наблюдает за данными, которые вас не интересуют в первую очередь.