javascript - 使用 React 和 Redux 的收藏夹购物车

Question

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

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

祝大家有美好的一天。

Answer 1

以 Redux 规范化方式存储数据非常有用。所以你应该有一个reducer，当键是电影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 获取它。