umi入门-制作一个简单的音乐播放器

umi是阿里整出来的一套react全家桶,可以实现零配置集成react+redux+路由的全家桶。

umi官网

github源码

网易云音乐接口

基础使用

安装

# 全局安装umi插件
sudo npm i umi -g

创建一个文件夹在里面创建目录 src/pages,pages中直接写react组件即可。里面的组件会自动的进行路由映射，根据文件名可以直接通过路由进行访问

// src/pages/index.js
import React from 'react'

function index(props) {
  return (
    

      
首页
    
  )
}
export default Index

运行

umi dev # 进入项目目录 直接运行

集成dva

安装插件umi-plugin-react

npm i umi-plugin-react

在项目根目录中创建配置文件.umirc.js

export default {
  plugins: [
    [
      'umi-plugin-react',
      {
        dva: true,
      },
    ]
  ],
};

创建model文件

// src/models/music.js
import { loadMusic, loadMusicDetail } from '../services/music';

export default {
  namespace: 'music',
  state: {
    list: [], // 歌曲列表
    current: {} // 当前播放的歌曲
  },
  effects: {
    // 加载歌曲列表
    *loadMusic(action, { call, put }) {
      const result = yield call(loadMusic, action.payload.keywords);
      yield put({
        type: 'save',
        payload: {
          list: result.data.result.songs
        }
      });
    },
    // 播放歌曲, 设置当前播放数据的值
    *play(action, { call, put }) {
      const result = yield call(loadMusicDetail, action.payload.id);
      yield put({
        type: 'save',
        payload: {
          current: result.data.data[0]
        }
      });
    }
  },
  reducers: {
    save(state, { payload }) {
      return { ...state, ...payload };
    }
  }
};