前言
React 和 Redux 是目前前端领域非常流行的技术栈，在大型应用中也越来越普遍地被应用。因此，在本篇文章中，我们将探讨如何使用 React 和 Redux 来构建一个高性能的音乐播放器，同时分享一些关于 React 和 Redux 的实践经验和一些指导意义。
技术栈
功能介绍
- 搜索功能：根据关键词搜索音乐。
- 播放功能：支持音乐的播放、停止、上一首、下一首、随机播放、单曲循环等操作。
- 歌词滚动：根据歌曲进度滚动歌词。
- 播放列表：展示当前的播放队列。
- 歌曲下载：支持歌曲下载。
进入实战
在开始之前，我们需要准备好开发所需的环境。本篇文章将采用 create-react-app 来搭建项目，同时使用 NeteaseCloudMusicApi 提供的接口来获取音乐数据。
目录结构
我们先来看一下整个项目的目录结构：
-- -------------------- ---- ------- --- --- - --- --- - --- ---------- - --- ---------- - --- -------- - --- ----- - --- ------ - --- ----- --- ------ --- ------------
- api：封装了请求相关的工具函数。
- components：存放 React 的可复用 UI 组件。
- containers：存放各个页面的容器组件。
- reducers：存放 Redux 的 store。
- store：负责组合所有 reducer，创建 store，并导出供页面使用。
- styles：存放公共的样式文件。
- utils：存放一些工具函数。
- public：用于存放静态资源。
环境配置
我们需要先确保我们已经安装了 Node.js 和 Git，接下来我们通过 create-react-app 来创建项目：
npx create-react-app react-redux-music-player
下一步，我们需要安装一些需要的依赖：
cd react-redux-music-player npm i redux react-redux redux-thunk react-router-dom immutable --save npm i axios classnames --save npm i eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y --save-dev
ESLint 配置
为了保证代码风格的一致性，我们需要为项目配置 ESLint，同时采用 Airbnb 的代码风格规范。根据项目需要，我们对 .eslintrc.js 中的配置进行了一些改动，完整的配置如下：
-- -------------------- ---- -------
-------------- - -
---- -
-------- -----
------- -----
--
-------- -----------
------- -----------------------
-------------- -
------------- -
---- -----
--
------------ ---
----------- ---------
--
-------- ----------
--------- -
------------------ -
----- -
------ --------
--
--
--
------ -
------------- ------
----------------- -------
------------------------------- -------- - ----------- ------- ------- ---
------------------------------- ------
-------------------------- ------
------------------------------ ------
--------------------------------- ------
------------------------------- ------
----------------------- ------
-------------------- ------
--
--开始编码
API 封装
我们需要封装请求相关的工具函数，这里我们采用 axios：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- --- - ----- ------- -- -
------ -------------- - ------ --
---------------- -- --------------
------------ -- ------------------
--
------ ----- ---- - ----- ----- -- -
------ --------------- -----
---------------- -- --------------
------------ -- ------------------
--路由配置
我们需要在 src/routes/index.js 中进行路由的配置：
-- -------------------- ---- -------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ ----- ---- --------
------ ------ ---- -----------------------
------ ---- ---- ---------------------
------ --------- ---- --------------------------
------ -------------- ---- -------------------------------
------ ------ ---- -----------------------
------ ---- ---- ---------------------
----- --------- - -- -- -
--------
--------
--------
------ ----- -------- ---------------- --
------ ----------------- --------------------- --
------ -------------------- -------------------------- --
------ -------------- ------------------ --
------ ---------------- ---------------- --
---------
---------
---------
--
------ ------- ----------组件封装
我们需要先分析页面所需的组件，设计出组件之间的父子关系，进而封装出高复用性的组件，这里我们展示一下对 Header 和 Footer 组件的封装：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------- ---- -------------
------ - ------- - ---- -------------------
------ ------ ---- ---------------------
----- ------ - -- -- -
------- --------------------------
-----
----
----
-------- ------------------------------- ----- -------
--
----------
-----
----
-------- ------------------------------- ----------------
--
----------
-----
----
-------- ------------------------------- -------------
--
----------
-----
-----
------
---------
--
----- ------ - -- -- -
------- --------------------------
-------- ---- ----------- ----------------
---------
--
------ - ------- ------ --
---------------- - ---
---------------- - ---Redux 配置
借助于 Redux-Thunk，我们可以编写异步的 Action，并将 Action 和 Reducer 串联在一起，进而创建一个 Store，这里展示一下我们对播放列表所做的操作：
-- -------------------- ---- -------
------ - ------ - ---- ------------
------ - -- ----------- ---- -----------------
----- ------------ - --------
------------ ---
---------- --
---
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
---- -----------------------------
------ ------------------------ ----------------------------
---- ---------------------------
------ ---------------------- ------------------
---- --------------------------------
------ --------------------------- ------------- -- ---------------------------------------
---- -------------------------------------
------ --------------------------- ------------- -- ----------------------------------
---- -------------------------------
------ ------------------------ ---------------------------- ---
--------
------ ------
-
--
------ ------- --------Immutable.js 的使用
对于 Immutable 的优势和使用方法，如何优雅地使用 Redux 和 Immutable 数据结构的响应式 UI 等问题，可以参考这篇 React+Redux 实战小结。
开始绘制 UI
经过功能分析、路由设计、组件封装以及 Redux 配置之后，我们终于可以着手进行 UI 的开发了，这里我们简单罗列一下 HomePage 的代码，其他页面的代码略作省略：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - ----------- - ---- ---------------------
------ ------ ---- --------------------------
------ ------ ---- --------------------------
------ -------- ---- ----------------------------
------ ------ ---- ---------------------
----- -------- - -- ------- -------- - ----------- - -- -- -
------------ -- -
--------------
-- ----
------ -
--
------- --
---- --------------------------
--------- ---------------- --
------
------- --
---
--
--
------------------ - -
------- ----------------------------
-------- ----------------------------
--
----- --------------- - ------- -- --
------- -------------------------
---
----- ------------------ - ---------- -- --
-------- --------------------
------------
-- ----------
---
------ ------- ------------------------ ------------------------------完善播放器功能
在 UI 布局方面，我们暂且不提。下面我们来详细讲解一下如何实现播放器的功能。我们使用了 react-h5-audio-player 这个第三方组件库，但是在基础展现方面却与此无任何关系，所以关于 UI 的代码部分略作省略：
-- -------------------- ---- -------
------ ------ - ------- ---- - ---- --------
------ --------- ---- -------------
------ - ------- - ---- --------------
------ - ------------------ - ---- --------
------ - --------------- ----- - ---- -----------------
------ - ---- - ---- ---------
------ - ------------------- ----------------- ------------ - ---- -----------------------
------ - --------- ------------- - ---- ----------------------
------ - ----------- -------- - ---- -----------------
------ - ---------- - ---- --------------
------ ----------------- ---- -------------------------------------
------ ------ ---- ---------------------
----- ------ - -------
------------
----------
-------------------
-----------------
-------------
---------
--------------
-- -- -
----- --------- - -------------
----- ----------- - -------------
----- -------- - ----- ------- -- -
----- ---- - -------------------
----- --- - ----- ---------------------------
-- ------ -
----------------------
-------
-
----- ----------- - -
---- ------
------ -----
------- ------- -------
--
----- ---- - --- ------------------
------------------- - -----
--------------- -- -- -
----- ------- - ---------------
----------------------------- -- -
---------------------
-----------------
---
---
------------
--
----- ----------- - -- -- -
-- ---------- --- ---------------- - -- -
---------------------------
- ---- -
---------------------- - ---
------------------ - ---
-
--
----- ------------ - ------- -- -
-- ----------------- --- -- -
---------------------------
-------------------
- ---- -
-- ---------- --- ------ -
-- ----------------- --- ------ - --- -
------------------ - ---
- ---- -
------------------ - ---
-
---------------------------
--------------------
-
--------------------------
-
--
----- --------------- - ------- -- -
-- ------ --- ---------- -------
--------------------
---------------------------
----------------
--
------ -
--
------ --------------- --------------------- --
--- ------------------ ---
---- ------------------------
------- ------------------------ ----------- -- --------------------
-- ------------- ----- --------- --
----
---------
----
----------------------- ------ -- -
--- -------------------- -------------------- --- ----- - ------------- - ----
---- -------------------------
---------- --- ----- - -- ------------- ----- ------------- -- - ------------ - ----------
------
---- ------------------------
----- -------------------------------------------------
----- ---------------------------------------------------------
------
------- ------------------------- ----------- -- ---------------------
-- ------------- ----- --------- --
---------
------- ----------------------- ----------- -- ------------------------
---------- --- ----- - -
-- ------------- ----- --------- --
- - -
-- ------------- ----- -------- --
--
---------
-----
---
-----
------
------------------
-------------------------------- - -------------------------------------- - --------
--------------------------- - ---------------------------------------- ------ - ----- - --------
----------------------------------- - -------------------------- - ------------------------------ - --
--
--------------- --
---
--
---
---------------- - -
------------ ----------------------------
---------- ----------------------------
------------------- --------------------------
----------------- --------------------------
------------- --------------------------
--------- --------------------------
-------------- --------------------------
--
----- --------------- - ------- -- --
------------ --------------------------------
---------- ------------------------------
---
----- ------------------ - ---------- -- --
------------------- -------------------------------------- ----------
----------------- ------------------------------------ ----------
------------- -------------------------------- ----------
--------- ---------------------------- ----------
-------------- --------------------------------- ----------
---
------ ------- ------------------------ ----------------------------总结
既然您已经看到这里，那就代表我们已经一起完成了这个高性能的音乐播放器项目。它不仅展现了 React 和 Redux 的一些最佳实践，还向我们展示了如何编写高性能、易维护和易扩展的代码。总之，希望这篇文章可以对您有所帮助，如果有考虑使用 React 和 Redux 构建类似项目的话，可以参考一下。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652d298c7d4982a6ebe97621