Redux Toolkit + React + TS + Tailwind CSS 复刻 YouTube 学习心得

Posted 2023-03-08 GoldenaArcher

Redux Toolkit + React + TS + Tailwind CSS 复刻 YouTube 学习心得

差不多滚过的最后一个练手项目了，感觉至少直接用 javascript 去写 Redux Toolkit 的 AsyncThunk 感觉已经挺舒服的，下一步就直接去大刀阔斧的改公司项目了。

这次选的练手项目依旧是比较简单的一个项目，没有在线预览地址……http 访问 https 失败来着，虽然尝试部署到了 github pages 上，不过 js/css 文件好像全都没加载出来，DOM 是空的。git 地址在这里https://github.com/GoldenaArcher/yt-clone，感兴趣的话自己到 Google could 上折腾一个 YouTube 的免费 API，放到 .env 文件里面就能跑，保存格式如下：

REACT_APP_YOUTUBE_DATA_API_KEY=XXXXXXXXXXX

YouTube 的免费 API 一天有一万个 data 的 quota，超了删了重新建一个就行，每个人免费可以创建 10 个项目。

首页

因为用的是真实的 API，所以就使用了 InfiniteScroll 这个插件去实现了无限拉取，形成的效果大概如下：

第一次拉取 20 个数据：

第二次拉取了 20 个新数据（总计 40 个）：

然后又拉取了一些(大概 60-80 个？)：

API 一直有在更新，也可以看到 scrollbar 的尺寸也变小了。除了 InfiniteScroll 这个库之外，infinite scroll 这个功能的主要实现还是依靠后端：

主要通过一个 nextPageToken 和一个 prevPageToken 对拉取的资料进行定向与处理，以确保每次返回的数据都是不一样的。

CSS 方面，tailwind 学到了一个插件：line-clamp-2，这个插件可以自动压缩行数，例如说标题，所有的标题最长只有两行的限额。这部分原生 CSS 也有实现过: CSS 的十个高级使用技巧，原理应该是一样的，不过 Again，tailwind 封装好了，这样打包的时候确实可以少 ship 一些没用到的代码。

这里可以做的优化是在重复调用的 API，先是有一个重复调用 search api 的问题，其次首页只需要调用默认的 search 和对应的视频信息即可，channel info 这个 request 不是很必须。

这个部分的代码是由 pages/Home.tsx, components/Card.tsx，以及 store/reducers/getHomePageVideos.ts 三个部分共同实现。

搜索页

这个页面其实和主页实现的功能差不多，如果看了三个页面的代码就会发现，结构都挺像的，每个 Card 变的地方也不算特别多，效果图如下：

因为用的是真实的 API，同样，搜索数据会有真实的数据返回。我觉得这里可以稍微优化一点的部分就在于，在输入框里进行搜索的时候，可以适当的使用一下 debounce 减少 API 的调用和 UI 的渲染。一方面一万个 quota 多保存几下，我好像是在一个半小时/两个小时区间用光的。另一方 UI 渲染得太快，晃得眼睛有点难受。

这个部分的代码是由 pages/Search.tsx, components/SearchCard.tsx，以及 store/reducers/getSearchPageVideos.ts 三个部分共同实现。

大致来说取名就是这样的规范。

视频页

同样是真实的数据，所以拉的视频都是可以播放的：

当然，因为播放器的机制太复杂了，因此这里直接使用了 iframe 嵌入，同时也发现了一个比较有意思的 css：aspect-video。aspect-video 是 tailwind 自己设置的，原生的 css 为：

aspect-ratio: 1 / 1;
aspect-ratio: 1;

/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;

这样就能比较轻松的对 4:3， 16:9 这样的视频进行扩大/缩小……之前不做视频相关的内容确实对这方面的 CSS 不太了解。

大致上就这样了，所有的 icons 都来自 react-icons，其实尝试着用 TS 写了一下这个项目发现用 TS 也没这么难——希望自己动手没有参考的时候还能这么自信就是了。

可以做其他功能

应该就是打开 up 这个功能，我参考了一下原生的 yt 把 URL 做出来了:

具体拉数据这块就还没做了。

不过用户 ID 好像有点问题……？