umi是阿里整出来的一套react全家桶,可以实现零配置集成react+redux+路由的全家桶。
基础使用
安装
# 全局安装umi插件
sudo npm i umi -g
创建一个文件夹在里面创建目录 src/pages,pages中直接写react组件即可。里面的组件会自动的进行路由映射，根据文件名可以直接通过路由进行访问
// src/pages/index.js
import React from 'react'
function index(props) {
return (
<div>
<h1>首页</h1>
</div>
)
}
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 };
}
}
};
