Redux 使用教程 - 播放器的实现-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，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：开始播放、暂停播放和更新进度。

const START_PLAYING = 'START_PLAYING';
const STOP_PLAYING = 'STOP_PLAYING';
const UPDATE_TIME = 'UPDATE_TIME';

function startPlaying() {
  return {
    type: START_PLAYING
  };
}

function stopPlaying() {
  return {
    type: STOP_PLAYING
  };
}

function updateTime(progress, currentTime) {
  return {
    type: UPDATE_TIME,
    payload: {
      progress,
      currentTime
    }
  };
}

这里使用了常量来定义 Action 类型，以便更好地管理 Action。同时，每个 Action 都返回一个包含 type 属性的对象。

定义 Reducer

下一步，我们需要定义 Reducer，用于响应 Action 并更新应用程序状态。

function playerReducer(state = initialState, action) {
  switch (action.type) {
    case START_PLAYING:
      return { ...state, isPlaying: true };
    case STOP_PLAYING:
      return { ...state, isPlaying: false };
    case UPDATE_TIME:
      return { ...state, ...action.payload };
    default:
      return state;
  }
}

这里我们使用 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，以及根据当前状态更新进度条和时间。

import { useDispatch } from 'react-redux';
import { startPlaying, stopPlaying } from './actions';

function Player() {
  const dispatch = useDispatch();

  const handlePlayClick = () => {
    dispatch(startPlaying());
  };

  const handlePauseClick = () => {
    dispatch(stopPlaying());
  };

  return (
    <div>
      <button onClick={handlePlayClick}>播放</button>
      <button onClick={handlePauseClick}>暂停</button>
      <div>
        <span>{currentTime}s</span>
        <div style={{ width: '100px', height: '10px', backgroundColor: 'grey' }}>
          <div style={{ width: `${progress}%`, height: '100%', backgroundColor: 'red' }}></div>
        </div>
      </div>
    </div>
  );
}

更新时间

我们还需要定时更新当前时间。可以使用 setInterval 方法来注册一个定时器，在其回调函数中更新剩余时间和进度条。

import { useEffect } from 'react';
import { updateTime } from './actions';

function Player() {
  const dispatch = useDispatch();
  const { isPlaying, progress, currentTime } = useSelector(state => state);

  useEffect(() => {
    let timer = null;

    if (isPlaying) {
      timer = setInterval(() => {
        dispatch(updateTime(progress + 1, currentTime + 1));
      }, 1000);
    }

    return () => {
      clearInterval(timer);
    };
  }, [isPlaying, progress, currentTime]);

  // ...
}

到这里，实现播放器应用的所有步骤都已经完成。

总结

Redux 是一个值得学习的优秀状态管理工具。在本文中，我们已经详细介绍了如何使用 Redux 实现一个简单的播放器应用程序。希望这篇文章对你有所帮助，并能够加深你对 Redux 的理解。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65aaa3e3add4f0e0ff43b595