为啥我使用 redux 时 axios.get 不起作用？

Posted 2023-02-22

【中文标题】为啥我使用 redux 时 axios.get 不起作用？

【英文标题】：Why axios.get doesn't work when I use redux?为什么我使用 redux 时 axios.get 不起作用？

【发布时间】：2021-06-19 20:42:18

【问题描述】：

我正在使用 json 文件中的图片创建一个页面。在我添加 redux 之前它一直有效。我是redus的新手，所以我希望你能帮助我找到我的错误。谢谢。

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>
  );

cardReducer.js

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

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

这里是完整代码：https://codesandbox.io/s/naughty-mcclintock-di9bb?file=/src/cardsActions.js

【问题讨论】：

axios逻辑在哪里？这是否包含在异步操作中？您的代码沙箱缺少一些文件并且无法运行。您的服务器是否在http://localhost:3003 上运行？提取时是否看到错误？你能更好地描述一下 redux 到底是什么不工作吗？

@DrewReese 我刚刚在codesandbox中添加了完整的代码。

我在代码和框中收到此错误Could not find module in path: '../Pages/PortfolioItem' relative to '/src/Pages/Portfolio.js'。您的问题不可重现。

Portfolio 中存在关于如何导入组件的问题（路径错误）。我同意这个问题无法重现，因为在 package.json 中也缺少 react-boostrap 依赖项。 @daryalewy 如果您真的想获得帮助，请查看您的代码并更新帖子。

@yudhiesh 我完成了代码并添加了我拥有的所有内容。 codesandbox.io/s/naughty-mcclintock-di9bb?file=/src/…

【参考方案1】：

看来您将卡片添加到了 redux 商店中的错误键：

case GET_CARDS:
  return 
    ...state,
    users: action.payload, // <-- users isn't accessed in UI
    loading: false
  ;

您可以访问state.cardsList.cards。将有效负载保存到您状态的 cards 部分。

case GET_CARDS:
  return 
    ...state,
    cards: action.payload, // <-- save payload to cards state
    loading: false
  ;

我不得不模拟一个 JSON API 端点，但只需将其换出，我就可以继续跟踪您的代码。除非您的特定本地服务器设置出现任何问题（即假设您的服务器正确提供了 portfolio-data.json 文件），否则这至少应该解决您的更新状态和 UI 问题。