0

На страницы 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>

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

5
  • Редюсер возвращает ссылку на объект, а не клон объекта. Возможно это ответ на вопрос про Мутацию редюсера при изменении данных
    – SwaD
    15 ноя 2022 в 9:12
  • Спасибо, за ответ) Изучил и в useEffect поменял на [...cards], но правда ничего не поменялось, в reducer тоже возвращаю копию, данные нигде не мутируются 15 ноя 2022 в 9:36
  • Мне главное убедиться что в reducer я делаю все верно, на ваш взгляд все ли верно у меня написано? 15 ноя 2022 в 10:18
  • Ваш редюсер должен возваращать состояние и не заниматься фильтром. Перенесите фильтрацию в компонент, в котором вы отображаете ваши карточки. После первого тыка на карточку, состояние меняется на отфильтрованное, остальное забылось. При тыке на другую карточку - данных нет, вернули пустой массив и он же уже является вашим состоянием
    – SwaD
    15 ноя 2022 в 18:03
  • Спасибо, за ответ! Так естественно работает как надо, но вот вопрос для чего тогда использовать redux? У меня получается что action payload мне не зачем отправлять в объекте action, и исходя из этого я понимаю что редьюсер getSubcategory избыточен, так как он возвращает мне те же карточки что и getCards. 16 ноя 2022 в 7:06

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.