Не выполняется axios.get при использовании redux

Question

Делаю страницу с отображением картинок, надо обернуть все в redux, но получаю ошибку, не могу понять в чем причина (это мой первый опыт в использовании redux), рендерится пустая страница. Буду благодарна за любую наводку.

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { getCards } from "../cardsActions";
import PortfolioItem from "../Pages/PortfolioItem";

export default function Portfolio() {

  const dispatch = useDispatch();
  const cardsListData = useSelector((state) => state.cardsList);
  const { loading, error, cards } = cardsListData;
  useEffect(() => {
    dispatch(getCards());
  }, [dispatch]);

  return (
    <div className="container">
      <div className="portfolio-wrapper">
        {loading
          ? "Loading..."
          : error
          ? error.message
          : cards.map((card) => <PortfolioItem key={card.id} {...card} />)}
      </div>
    </div>
  );
}

Вот полный код: https://codesandbox.io/s/frosty-hill-egw1p

Answer 1

У Вас ошибка в редьюсере:

import { GET_CARDS, CARDS_ERROR } from "../types.js";

const initialState = {
  cards: [],
  loading: true
};

export default function (state = initialState, action) {
  switch (action.type) {
    case GET_CARDS:
      return {
        ...state,
        cards: action.payload,
        loading: false
      };
    case CARDS_ERROR:
      return {
        loading: false,
        error: action.payload
      };
    default:
      return state;
  }
}

У Вас результат action.payload должен устанавливать новое значение для переменной cards, в то время как у Вас там было прописано users. А так - всё выглядит рабочим. Протестировал на codesandbox - Ваш код работает (заменил запрос на localhost:3003 на константную переменную, чтобы код работал).

БЛОГ НА HUSL

Не выполняется axios.get при использовании redux

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