model问题
-
namespace:
model 的命名空间,只能用字符串。一个大型应用可能包含多个 model,通过namespace区分。 -
state:
当前 model状态的初始值,表示当前状态。 -
reducers:
用于处理同步操作,可以修改 state,由 action 触发。reducer是一个纯函数,它接受当前的 state 及一个数据体(payload)作为入参,返回一个新的 state。 -
effects:
用于处理异步操作(例如:与服务端交互)和业务逻辑,也是由 action 触发。但是,它不可以修改 state,要通过触发 action 调用 reducer 实现对 state 的间接操作。 -
action:
是 reducers 及 effects 的触发器,一般是一个对象,形如{ type: ‘add’, payload: todo },通过 type 属性可以匹配到具体某个 reducer 或者 effect,payload 属性则是数据体,用于传送给 reducer 或 effect。
代理问题
配置代理也很简单,只需在配置文件 config/config.js 中与 routes 同级处增加 proxy 字段,代码如下
proxy: {
'/dev': {
// target: 'https://08ad1pao69.execute-api.us-east-1.amazonaws.com',
changeOrigin: true,
},
},
配置的含义是:去往本地服务器 localhost:8000 的 ajax 调用中,如果是以 /dev 开头的,那么就转发到远端的
https://08ad1pao69.execute-api.us-east-1.amazonaws.com
服务器当中,/dev 也会保留在转发地址中。比如:
/dev/random_joke 就会被转发到
https://08ad1pao69.execute-api.us-east-1.amazonaws.com/dev/random_joke
mock模拟数据
- 首先需要在config.js中配置locale
plugins: [
['umi-plugin-react', {
antd: true,
dva: true,
locale: {
enable: true,
},
}],
],
- 模拟请求出错
export default {
'get /dev/random_joke': function (req, res) {
res.status(500);
res.json({});
},
};
自定义控件
当Input, Select之类的控件不满足需求时,需要自定义控件,让它们可以和 antd 的 Form 组件一起使用。可以使用getFieldDecorator 这个方法,它执行后会返回一个函数,那个函数接收的参数就是一个输入组件
FormItem label="自定义输入">
{getFieldDecorator('custom', {
rules: [{ required: true }],
})(
<YourInput />
)}
</FormItem>
YourInput这个组件满足如下三个条件即可:
提供受控属性 value 或其它与 valuePropName 的值同名的属性。
提供 onChange 事件或 trigger 的值同名的事件
不能是函数式组件
上传下载
只要一个 a 标签,就可以实现文件下载,实例:
<a href="http://somehost/somefile.zip" download="filename.zip">Download file</a>
关于umi
umi是一个可插拔的企业级 react 应用框架, 是蚂蚁金服的底层前端框架
环境准备
1 安装node 8.10以上版本
2 使用yarn 管理npm依赖
# 国内源
$ npm i yarn tyarn -g
# 后面文档里的 yarn 换成 tyarn
$ tyarn -v
3 全局安装 umi,并确保版本是 2.0.0 或以上
$ yarn global add umi
$ umi -v
2.0.0
4 在环境变量的path中配置路径
执行
yarn global bin
将得到的路径添加到path
脚手架
- 建立空目录
$ mkdir myapp && cd myapp
- umi g 创建一些页面
$ umi g page index
$ umi g page users
路由
umi 里约定默认情况下 pages 下所有的 js 文件即路由
启动本地服务
$ umi dev
npm run dev 执行的就是 umi dev
部署发布
- 执行umi build
- 验证
$ yarn global add serve
$ serve ./dist
Serving!
- Local: http://localhost:5000
- On Your Network: http://{Your IP}:5000
Copied local address to clipboard!
- 部署
$ yarn global add now
$ now ./dist
> Deploying /private/tmp/sorrycc-1KVCmK/dist under chencheng
> Synced 3 files (301.93KB) [2s]
> https://dist-jtckzjjatx.now.sh [in clipboard] [1s]
> Deployment complete!