如何在React+Redux项目中实现跨组件添加并渲染收藏电影功能

1. 修复Action_adventure.js的按钮触发逻辑 #

现有代码的问题是点击按钮时没有把add_favourite_movie生成的action传给dispatch，而且仅传电影id会导致收藏列表无法展示完整电影信息，修改如下：

// 原来的按钮代码
<button onClick={() => add_favourite_movie(el.id)}>Add to favourite</button>
// 修改为
<button onClick={() => dispatch(add_favourite_movie(el))}>Add to favourite</button>

2. 完成Favourites.js的收藏列表渲染 #

修正语法错误，添加列表渲染逻辑：

import React from "react";
import {useSelector} from "react-redux";

export let Favourites = () => {
  // 从redux中取收藏的电影列表
  let favourites_movies = useSelector(({movies_reducer : {favourites_movies}}) => favourites_movies)

  return (
    <div>
      <h2>我的收藏</h2>
      {favourites_movies.length === 0 ? (
        <p>暂无收藏电影</p>
      ) : (
        favourites_movies.map(el => (
          <div key={el.id}>
            <h3>{el.title}</h3>
            <img src={el.posterURL} alt={el.title} className="favourite_movie"/>
          </div>
        ))
      )}
    </div>
  )
}

3. 可选优化：避免重复添加同个电影到收藏 #

修改reducers.js中ADD_FILMS_TO_FAVOURITE的逻辑，添加前先判断是否已存在：

case ADD_FILMS_TO_FAVOURITE: {
  const isExist = state.favourites_movies.some(movie => movie.id === action.payload.id)
  if (isExist) return state
  return {
    ...state,
    favourites_movies: [...state.favourites_movies, action.payload]
  }
}

内容的提问来源于stack exchange，提问作者Dmitry Chernyak