我克隆了 Netflix，并加了点新花样。

当我收到一封关于参加 Shopify 网络研讨会的邮件时，我毫不犹豫地报了名。我们都知道 Shopify 是什么公司。研讨会结束后，主持人给了我一个实习申请链接。在填写申请表时，我发现他们还要求提交一个项目。我当时非常兴奋，心想“太好了！现在我终于有事可做了！”。作为开发者，我们经常会遇到瓶颈，不知道下一步该做什么。我喜欢称之为“代码瓶颈”。

项目

（GIF）

隆重推出 Notflix，这是对 Netflix 的戏仿。唯一的区别在于，你不能在这里观看电影，只能查看电影信息。这是一个我开发的电影数据库应用，用户可以搜索现有电影，并可选择收藏（保存）最多 5 部（符合 Shopify 挑战赛的要求）。这个项目的灵感来源于 Shopify 要求实习生完成的 Shoppies 挑战赛（或者你自己的一个项目）。

技术栈

一开始我考虑过使用 MERN 技术栈，但由于我还在摸索这个技术栈，而且项目有截止日期，所以我最终选择了 Rails 和 React。我对 Rails 的经验比 Node 更丰富。我还使用了 OMDB 数据库 API 来提取电影数据，以便呈现给各位。

项目流程

我使用 Rails 构建后端，创建了用户模型和电影模型。它们之间的关联关系如下……

User > has_many :movies, dependent: :destroy
Movie > belongs_to :user, optional: true

很简单。

我的目标是将用户搜索到的所有电影都导入到我的 Rails 后端数据库（PostgreSQL）中。为此，我创建了一个名为 `add_movie_to_home` 的方法，该方法会将电影持久化，然后 React 会在客户端处理电影的渲染。

请注意，我使用了 `find_by(params[:plot])`。之所以使用 `plot`，是因为我认为电影剧情简介的措辞总是各不相同，而电影标题可能对某些电影来说相同。我希望确保只保留唯一的电影（如果这样说您能理解的话）。如果某部电影已经存在，我会友好地提醒用户该电影已存在。请看这里。

为了让用户能够保存电影，我只需获取当前用户，然后将电影添加到该用户的“电影（关联）”数组中。由于每个用户最多只能添加 5 部电影，我在 User 模型中创建了一个自定义方法来确保这一点。

然后我在创建操作中调用它。不过我对这种方法仍然有些怀疑。我一直在想（现在也是），我可以使用更复杂的关联，例如多对多关系，因为一部电影可以属于多个用户，而一个用户也可以拥有多部电影。我会在某个时候重构这部分代码。

现在，我来解释一下电影​​的排序和渲染过程。说实话，我在排序过程中玩了点小花样。我创建了一个 SortContainer 组件，其中包含排序按钮，就像你在上面的 GIF 动画中看到的那样。它有一个名为 `sortMovies` 的 prop，这是一个从我的 `AllMoviesContainer` 组件传递下来的函数。这个函数接收一个电影列表作为参数，然后更新 `movies` 属性的状态。我使用了 `movies` 作为参数，这与我的属性名 `movies` 相同。现在，利用 ES6 的特性，我可以隐式地设置 `movies` 属性名，而无需像这样显式地进行设置。

sortMovies = movies => {
     this.setState(
          movies: movies
     )
}

对比

然后，我在 SortContainer 中创建的各种排序方法中使用此函数。

这段代码的作用是在执行一些排序逻辑后，将返回的数组赋值给一个变量，然后将该变量传递给 sortMovies 函数，该函数会重新渲染页面，并显示更新后的电影排序列表。如果你查看代码，你会看到我实现了四种不同的排序方式。

最后，我要感谢大家的阅读。这个项目真的太棒了！我觉得有很多地方可以改进，让代码更简洁。我可能以后写的每个项目博客文章里都会提到这一点。也许我会把状态管理迁移到 Redux，或者把它迁移到 Node。谁知道呢？我总是充满惊喜。下次见，开发者们 😉