带有 React 和 Redux 的收藏夹购物车答案

【问题标题】：Favorites cart with React and Redux带有 React 和 Redux 的收藏夹购物车
【发布时间】：2019-09-13 15:46:37
【问题描述】：

Bonjour stackoverflow，我制作了一个收藏夹组件来添加通过 API 获得的电影。我使用 Redux 将电影添加到收藏夹组件，但目前我只是得到一个整数。我想检索有关添加的电影的所有信息（标题、描述、照片等）并将其显示在我的收藏夹组件中。

这是我的收藏夹组件，用于检索收藏的电影：

<div>
        <Badge className={classes.badgeFav} color="secondary" badgeContent={this.props.movieReducer.movies.length}>
          <Button
            onClick={this.handleClickOpen}
            target="_blank"
            className={classes.navLink}
          >
            <Favorite className={classes.icons} /> Favorites
          </Button>
          </Badge>
          <Dialog
            open={this.state.open}
            TransitionComponent={Transition}
            keepMounted
            onClose={this.handleClose}
            aria-labelledby="alert-dialog-slide-title"
            aria-describedby="alert-dialog-slide-description"
          >
            <DialogTitle id="alert-dialog-slide-title">My Favorites</DialogTitle>
            <DialogContent>
              <DialogContentText id="alert-dialog-slide-description">
                {this.props.movieReducer.movies.length} movie(s)
              </DialogContentText>
            </DialogContent>
            <DialogActions>
              <Button onClick={this.handleClose} className={classes.navLinkMod}>
                Close
              </Button>
            </DialogActions>
          </Dialog>
      </div>

以 Redux 结尾：

const mapDispatchToProps = dispatch => ({

});

const mapStateToProps = state => ({
  ...state
})

还有我将电影添加到收藏夹组件的组件（我删除了一些代码以便于理解）： （目前它发送一个整数 (onClick={() => addMovie(1)})）

render() {
    const { classes } = this.props;
    const { addMovie } = this.props;
    const theMovies = this.state.films.map((film) => {
      return(
        <Grid key={film.id} item xs={6} sm={6} md={3} lg={3}>
          <Card className='container-card-poster'>
                <figcaption className='fig-caption'>
                  <h4 className={classes.titleOverlay}>{film.title}</h4>
                </figcaption>
                  <Tooltip 
                    TransitionComponent={Zoom}
                    id="Add to favorite"
                    title={<p>Add to favorite</p>}
                    placement={window.innerWidth > 959 ? "top" : "top"}
                  >
                    <Favorite onClick={() => addMovie(1)} className={classes.iconsHoverFav} />
                  </Tooltip>
          </Card>
        </Grid>

以 Redux 结尾：

const mapDispatchToProps = dispatch => ({
  addMovie: (movie) => dispatch(addMovie(movie))
});
const mapStateToProps = state => ({
  ...state
})
TopFilms.propTypes = {
  classes: PropTypes.object
};

添加电影时我不知道如何获取所有信息，所以如果有人可以帮助我，那就太好了！

祝大家有个愉快的一天。

【问题讨论】：

不确定我明白你在说哪个information，请解释一下好吗？
您好@NazarLitvin，抱歉耽搁了。我说的是电影的信息，如标题、日期、概述、图片等。目前我能得到的只是一个整数。我在“onClick”中传递函数addMovie，并以整数作为值。我想用电影的信息替换这个整数，但我不知道该怎么做..
根据我从您的代码中了解到的情况，您可以将调用addMovie 替换为film 而不是1 这里onClick={() => addMovie(1)}。但是我不清楚为什么要将films 存储在组件状态中。稍后我会用代码示例更新我的答案，所以它可能会对你有所帮助。
感谢您的帮助 @NazarLitvin ，我已将呼叫 addMovie 替换为 film 而不是 1 并在我的收藏夹组件中创建了 .map 以显示添加的电影信息。我不知道你说的是不是同一件事，但我将 films 存储在我的组件状态中，以显示我通过 API 获得的所有电影，并带有 .map
能否请您分享一段发出此 API 请求的代码？

标签： javascript reactjs redux react-redux

【解决方案1】：

将数据存储在标准化的 Redux 中非常有用。所以你应该有一个reducer，当key是电影ID并为电影本身赋值时，它将把电影存储在JS对象中。因此，您可以为最喜欢的电影制作一个 reducer，它只会存储他们的 ID。

所以在这种情况下，您的电影将存储为：

{
  1: { name: "The Shawshank Redemption", year: 1994 },
  2: { name: "The Godfather", year: 1972 },
  3: { name: "The Dark Knight", year: 2008 }
}

收藏为：

[ 1, 3 ]

当你必须用最喜欢的电影渲染一个组件时，你可以通过 id 来获取它。

【讨论】：