Reactjs React redux不从API获取数据

嗨，我是redux新手，我正在尝试使用来自的API创建一个电影应用程序。我试图展示流行电影，我确信API链接可以工作，因为我在《邮递员》中测试了它，但我似乎不明白为什么redux没有收集数据

//action
import { FETCH_POPULAR } from "./types";
import axios from "axios";

export const fetchPopularMovies = () => (dispatch) => {
  axios
    .get(
      `https://api.themoviedb.org/3/movie/popular?api_key=${API}&language=en-US`
    )
    .then((response) =>
      dispatch({
        type: FETCH_POPULAR,
        payload: response.data
      })
    )
    .catch((err) => console.log(err));
};

---

---

从“React”导入React；
从“react redux”导入{connect}；
从“/Popular”导入Popular；
const FetchedPopular=（道具）=>{
const{popular}=道具；
让内容=”；
内容=
常用长度>0
？popular.map（（项目、索引）=>(
))
：null；
返回{content}；
};
常量mapStateToProps=（状态）=>({
流行的，流行的，流行的，
});
导出默认连接（mapStateToProps）（FetchedPopular）；

---

从“React”导入React；
导入“./Styles.css”；
const Popular=（道具）=>{
返回(
);
};
出口违约流行；

---

我真的说不出我遗漏了什么。有人能帮我吗？

在

MapStateTrops

旁边，你需要创建

mapDispatchToProps

。之后，您将能够从React组件调用Redux操作。 我建议你填一下表格。然后您需要使用此

mapDispatchToProps

作为

connect

方法的第二个参数

当您将动作映射到组件时，您需要在某处调用它。例如，建议在组件安装上执行此操作。由于React组件是功能组件，因此需要在中完成

import React，{useffect}来自“React”；
从“react redux”导入{connect}；
从“/Popular”导入Popular；
将{fetchPopularMovies}从“路径”导入您的操作文件
const FetchedPopular=（道具）=>{
const{popular}=道具；
让内容=”；
useffect（（）=>{
//调用您的映射操作（由于useEffect钩子的依赖项数组为空，因此在组件装载时只调用一次）
props.fetchPopularMovies（）；
}, [])
内容=
常用长度>0
？popular.map（（项目、索引）=>(
))
：null；
返回{content}；
};
常量mapStateToProps=（状态）=>({
流行的，流行的，流行的，
});
//创建mapDispatchToProps
const mapDispatchToProps={
获取流行视频
}
//使用mapDispatchToProps作为“connect”方法的第二个参数。
导出默认连接（mapStateToProps、mapDispatchToProps）（FetchedPopular）；

此外，正如我在上面的评论中所写，您的

Popular

没有prop

poster\u路径

，但它有prop

Popular

，它可能具有属性

poster\u路径

从“React”导入React；
导入“./Styles.css”；
const Popular=（道具）=>{
返回(
);
};
出口违约流行；

您可以控制台记录

响应。数据

并检查您的数据在redux中的存储方式吗？我们看不到您的操作fetchPopularMovies何时被调度，您可以发布该操作的调度代码吗？此外，您的

Popular

组件正在使用

props.poster\u path

，但您没有将

poster\u path

prop传递给

FetchedPopular

中的

Popular

组件。您正在传递

popular

prop。是不是应该

道具。流行。海报路径

那么？@lavor嘿，对不起，我对redux很陌生，所以我很迷路，API获取了一个电影列表，我想通过海报路径进行映射，如果有任何关于如何实现这一点的建议，我将非常感谢。我在mapStateToProps旁边添加了fetchPopularMovies，但我确信这是不正确的lol。。

//reducer
import { FETCH_POPULAR } from "../actions/types";

const initialState = {
  popular: [],
};

export default function (state = initialState, action) {
  switch (action.type) {
    case FETCH_POPULAR:
      return {
        ...state,
        popular: action.payload,
      };
    default:
      return state;
  }
}

import React from "react";
import { connect } from "react-redux";
import Popular from "./Popular";


const FetchedPopular = (props) => {
  const { popular } = props;
  let content = "";

  content =
    popular.length > 0
      ? popular.map((item, index) => (
          <Popular key={index} popular={item} />
        
        ))
      : null;

  return <div className="fetched-movies">{content}</div>;
};

const mapStateToProps = (state) => ({
  popular: state.popular.popular,
});

export default connect(mapStateToProps)(FetchedPopular);

import React from "react";
import "../Styles.css";

const Popular = (props) => {
  return (
    <div className="movie-container">
      <img
        className="poster"
        src={`https://image.tmdb.org/t/p/w400/${props.poster_path}`}
      />
      
    </div>
  );
};

export default Popular;