在前端开发中，Redux 是一种流行的状态管理工具，它可以帮助我们更好地管理应用程序的状态，提高开发效率。本文将介绍如何使用 Redux 来实现一个简单的播放器应用程序。
Redux 概述
Redux 是一个 JavaScript 应用程序状态管理工具。它是单向数据流的，意思是应用程序状态是只读的，不可直接更改，而必须通过 Action、Reducer 和 Store 三者来完成状态管理。
- Action 表示应用程序状态的更改；
- Reducer 用于响应 Action 并更新应用程序状态；
- Store 是统一存储应用程序状态的中心。
实现播放器应用
在开始编写代码之前，让我们先明确一下我们需要构建的功能。我们需要一个播放器界面，其中包括播放/暂停按钮、进度条和当前播放时间等。
安装 redux 和 react-redux
在开始之前，先确保 redux 和 react-redux 已经安装好。可以通过 npm 或 yarn 安装：
# npm 安装 npm install redux react-redux --save # yarn 安装 yarn add redux react-redux
设计状态
在实现任何应用程序之前，我们需要先思考一下应该存储哪些应用程序状态。在我们的例子中，需要存储的状态包括：
- 是否正在播放；
- 当前播放时间；
- 播放进度百分比。
根据这些状态，我们可以定义一个初始状态对象：
const initialState = {
isPlaying: false,
currentTime: 0,
progress: 0
};定义 Action
接下来，我们需要定义更新应用程序状态的 Action。在本例中，我们需要定义三个 Action：开始播放、暂停播放和更新进度。
-- -------------------- ---- -------
----- ------------- - ----------------
----- ------------ - ---------------
----- ----------- - --------------
-------- -------------- -
------ -
----- -------------
--
-
-------- ------------- -
------ -
----- ------------
--
-
-------- -------------------- ------------ -
------ -
----- ------------
-------- -
---------
-----------
-
--
-这里使用了常量来定义 Action 类型，以便更好地管理 Action。同时，每个 Action 都返回一个包含 type 属性的对象。
定义 Reducer
下一步，我们需要定义 Reducer，用于响应 Action 并更新应用程序状态。
-- -------------------- ---- -------
-------- ------------------- - ------------- ------- -
------ ------------- -
---- --------------
------ - --------- ---------- ---- --
---- -------------
------ - --------- ---------- ----- --
---- ------------
------ - --------- ----------------- --
--------
------ ------
-
-这里我们使用 Switch 语句处理每个 Action。
- 对于开始播放的 Action，我们将 isPlaying 属性设置为 true；
- 对于停止播放的 Action，我们将 isPlaying 属性设置为 false；
- 对于更新时间的 Action，我们将 progress 和 currentTime 属性更新为提供的值；
- 对于所有其他类型的 Action，我们只需返回当前状态。
创建 Store
有了 Reducer，我们需要创建一个 Store 来存储状态。我们可以通过 createStore 方法创建一个 Store。
import { createStore } from 'redux';
const store = createStore(playerReducer);实现播放器界面
接下来，我们需要使用 react-redux 实现播放器界面。首先，从 Store 中获取当前状态。
import { useSelector } from 'react-redux';
function Player() {
const { isPlaying, progress, currentTime } = useSelector(state => state);
// ...
}然后，实现播放器界面。我们只需在按钮点击处理程序中分派 “START_PLAYING” 和 “STOP_PLAYING” Action，以及根据当前状态更新进度条和时间。
-- -------------------- ---- -------
------ - ----------- - ---- --------------
------ - ------------- ----------- - ---- ------------
-------- -------- -
----- -------- - --------------
----- --------------- - -- -- -
-------------------------
--
----- ---------------- - -- -- -
------------------------
--
------ -
-----
------- -------------------------------------
------- --------------------------------------
-----
---------------------------
---- -------- ------ -------- ------- ------- ---------------- ------ ---
---- -------- ------ --------------- ------- ------- ---------------- ----- ---------
------
------
------
--
-更新时间
我们还需要定时更新当前时间。可以使用 setInterval 方法来注册一个定时器，在其回调函数中更新剩余时间和进度条。
-- -------------------- ---- -------
------ - --------- - ---- --------
------ - ---------- - ---- ------------
-------- -------- -
----- -------- - --------------
----- - ---------- --------- ----------- - - ----------------- -- -------
------------ -- -
--- ----- - -----
-- ----------- -
----- - -------------- -- -
---------------------------- - -- ----------- - ----
-- ------
-
------ -- -- -
---------------------
--
-- ----------- --------- --------------
-- ---
-到这里，实现播放器应用的所有步骤都已经完成。
总结
Redux 是一个值得学习的优秀状态管理工具。在本文中，我们已经详细介绍了如何使用 Redux 实现一个简单的播放器应用程序。希望这篇文章对你有所帮助，并能够加深你对 Redux 的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65aaa3e3add4f0e0ff43b595