Почему мое первоначальное состояние видоизменяется при фильтрации с помощью активного редукса

Question

Я использую Redux в приложении реагировать. Почему этот фильтрующий функционал мутирует с оригинальным state.products? Я не могу понять, почему

state.products = [
   { 
      type: "one",
      products: [
         { active: true },
         { active: false }
     ]
  }
 ]

function mapStateToProps(state) {
 const test = state.products.filter((item) => {
   if(item.type === "one") {
     return item.products = item.products.filter((item) => {
       item.active
      });
    }
    return item;
  });

  return {
    machineSearchWeightRange: state.machineSearchWeightRange,
    filteredItems: test //This will have only products active
 };
}

FilterItems будет иметь только те продукты, которые являются активными, но также обновляется файл state.products, содержащий только активные продукты при повторной фильтрации по тем же данным.

Предложения

Answer 1

Поскольку вы присваиваете свойство существующему элементу состояния:

function mapStateToProps(state) {
  const test = state.products.filter((item) => {
    if(item.type === "one") {
      return item.products = item.products.filter((item) => { // <========== Here
        item.active
       });
     }
     return item;
   });

   return {
     machineSearchWeightRange: state.machineSearchWeightRange,
     filteredItems: test //This will have only products active
  };
}

Вместо этого создайте новый элемент для возврата.Кроме того, похоже, что вам нужно map вместе с filter, и вы на самом деле не возвращаете item.active в своем внутреннем filter (см. ответы на этот вопрос длябольше там):

function mapStateToProps(state) {
  const test = state.products.filter(({type}) => type === "one").map(item => {
    return {
        ...item,
        products: item.products.filter((item) => {
          return item.active;
        })
    };
  });

  return {
    machineSearchWeightRange: state.machineSearchWeightRange,
    filteredItems: test //This will have only products active
  };
}

---

Примечание: Это:

products: item.products.filter((item) => {
  return item.active;
})

может быть просто:

products: item.products.filter(({active}) => active)