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

Question

На страницы Face в useEffect делаю запрос за данными карточек, карточки получаю и извлекаю их в useSelector и отрисовываю контент этими карточками. У меня есть своего рода табы, по клику на которые делается dispatch за категориями карточек с payload названия категории. В редьюсере я написал фильтрацию этих карточке с учетом payload. На первый клик по табу все проходит отлично и данные отфильтровываются, но когда я нажимаю после этого на другой таб, массив карточке становится пустым. Как я полагаю, что при втором клике, в массиве карточек не находится соответствующей категории и он возвращает пустой массив.

export const cardsSlice = createSlice({
  name: 'cards',
  initialState,
  reducers: {
    getSubcategory: (state, action) => ({
      ...state,
      cards: [...state.cards.filter((card) => card.subcategory === action.payload)],
    }),
  },
  extraReducers: {
    [getCards.pending]: (state) => {
      state.loading = true;
    },
    [getCards.fulfilled]: (state, { payload }) => {
      state.loading = false;
      state.cards = payload;
    },
    [getCards.rejected]: (state) => {
      state.loading = false;
    },
  },
});
export const { getSubcategory } = cardsSlice.actions;
export default cardsSlice.reducer;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

const FacePage = () => {
  const dispatch = useDispatch();
  const [cardList, setCardList] = useState([]);
  const { cards } = useSelector((state) => state.cards);
  const face = cardList.filter((card) => card.category === 'face');

  const showSubcategory = (subcategory) => {
    dispatch(getSubcategory(subcategory));
  };

  useEffect(() => {
    if (!cards) {
      getCards();
    }
    setCardList(cards);
  }, [cards]);
  console.log(cards);

  return (
    <div className={styles['pages-wrapper']}>
      <Header />
      <CareIntro data={careIntro} />
      <BrandLine image={brandLine.img} />
      <CareProducts onShowSubcategory={showSubcategory} cards={face} />
    </div>
  );
};
export default FacePage;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Не пойму в чем проблема, подскажите пожалуйста а то я исчерпал все возможные варианты решения

БЛОГ НА HUSL

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

Ответы (0 шт):