玩转音乐世界！React全家桶打造的Web音乐App实战

2023-09-28 06:40:45

React全家桶打造的Web音乐App实战（九）：皮肤切换

终于来到了这款React Web音乐App实战的最后一节了。皮肤切换是Web音乐App中一个与核心无关的功能，加入这个功能可以为应用增添不少趣味性。本节，我们就将探索如何使用React全家桶实现皮肤切换功能。

准备工作

字体图标制作

首先，我们需要制作一套用于皮肤切换的字体图标。您可以使用IcoMoon等在线工具创建自己的图标集。字体图标制作完成后会有一份icomoon.zip包，解压后将里面fonts目录下的4个文件重命名为icomusic，然后将它们复制到项目的fonts目录中。
Sass变量准备

在src/styles/variables.scss文件中，添加如下Sass变量：

$skin-primary-color: #FF4081;
$skin-secondary-color: #EEEEEE;

实现皮肤切换功能

创建皮肤切换组件

在src/components目录下，新建一个SkinSwitcher.js文件，代码如下：

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { changeSkin } from "../redux/actions";

const SkinSwitcher = () => {
  const skin = useSelector((state) => state.skin);
  const dispatch = useDispatch();

  const handleSkinChange = (e) => {
    dispatch(changeSkin(e.target.value));
  };

  return (
    <div className="skin-switcher">
      <label>皮肤:</label>
      <select value={skin} onChange={handleSkinChange}>
        <option value="default">默认</option>
        <option value="dark">暗黑</option>
      </select>
    </div>
  );
};

export default SkinSwitcher;

在App.js中使用SkinSwitcher组件

在src/App.js文件中，添加如下代码：

import SkinSwitcher from "./components/SkinSwitcher";

function App() {
  return (
    <div className="App">
      <SkinSwitcher />
      {/* 其余代码 */}
    </div>
  );
}

在Redux中添加皮肤切换Action

在src/redux/actions.js文件中，添加如下Action：

export const changeSkin = (skin) => ({
  type: "CHANGE_SKIN",
  payload: skin,
});

在Redux中添加皮肤切换Reducer

在src/redux/reducers/index.js文件中，添加如下Reducer：

const initialState = {
  skin: "default",
};

const skinReducer = (state = initialState, action) => {
  switch (action.type) {
    case "CHANGE_SKIN":
      return {
        ...state,
        skin: action.payload,
      };
    default:
      return state;
  }
};

export default skinReducer;

样式调整

在src/styles/app.scss文件中，添加如下样式：

body {
  background-color: $skin-secondary-color;
  color: $skin-primary-color;
}

.dark-skin {
  background-color: $skin-primary-color;
  color: $skin-secondary-color;
}