dva-plugin-common
一个用于dva的插件, 提供了常用的reducer和effect
安装
- yarn add dva-plugin-common
- npm install dva-plugin --save
使用方法
- 引入hooks
单独使用dva
// index.js
import { createHooks } from 'dva-plugin-common'
let app = dva({
...createHooks()
})
使用umi
// dva.js
import { createHooks } from 'dva-plugin-common'
export const config = () => {
return {
...createHooks()
}
}
- 引入mapDispatchToProps
// 任意UI层文件, 例如test.jsx
import { createMapDispatchToProps } from 'dva-plugin-common'
import { connect } from 'dva'
function Test(){
return <div>Hello</div>
}
// namespace就是test
const mapDispatchToProps = createMapDispatchToProps('test')
const mapStateToProps = ({ test }) => ({ ...test })
export default connect(mapStateToProps,mapDispatchToProps)(Test)
- 该mapDispatchToProps提供了一个updateState方法, 类似于react的setState
// state就是redux的test这个namespace键值下的内容.
updateState((state) => {
return {
...state,
a:{
b:123
}
}
})
和一个getAsyncData方法, 用于获取restful api的数据, 同步到redux. (需要继承model之后可以使用)
const response = getAsyncData({
namespace: 'test',
url: '/api/getUsers',
options: {
method: 'GET'
},
save: 'users'
})
- 继承model
import { modelExtend } from 'dva-plugin-common'
export default modelExtend({
namespace: 'test',
state: { a: 1 }
})
使用说明
- hooks为必须引入. hooks提供了updateState这个reducer, 和一个request这个extraReducer. updateState同上述说明, 用于提供一个和setState相似的修改redux的方法; request是提供给getAsyncData这个effect使用, 用于保存一个api请求的列表. 可以用于绑定在各种UI组件库的spin组件上.
- createMapDispatchToProps为必须引入. 为UI上提供调用了updateState这个reducer的方法, 和调用getAsyncData这个effect的方法. 同时也提供原生dispatch方法. 允许增加其他dispatch方法, 详见api列表.
- modelExtend为可选引入. 继承了该model之后可以调用getAsyncData这个effect. 如果不继承则无法调用.
- getAsyncData可以用于获取restful api接口数据; 请求的超时处理; 请求的错误处理; 返回值的存储; 和请求列表的保存.
API
createHooks
暂无参数
const hooks = createHooks();
createMapDispatchToProps
params | type | usage | vital |
---|
namespace | string | dva的namespace | 必选 |
const namespace = 'test'
const mapDispatchToProps = createMapDispatchToProps(namespace)
modelExtend
params | type | usage | vital |
---|
defaultParams | object | 该model的默认参数, 详见defaultParams | 非必选 |
model | object | dva的model, 详见dva model的设置 | 必选 |
// 无默认参数
const model = {
namespace: 'test',
state: { a: 1 },
subscription: {},
reducers: {},
effects: {}
}
const enhanceModelWithoutDefaultParams = modelExtend(model);
// 有默认参数
const defaultParams = {
TIMEOUT_SEC: 5 * 1000,
MSG_DURATION: 2,
ERR_DEFINE: ({ status }) => status !== true,
SUCC_MSG: ({ respDesc }) => `请求成功: ${respDesc}`,
ERR_MSG: ({ respDesc }) => `请求失败: ${respDesc}`,
}
const enhanceModelWithDefaultParams = modelExntend(defaultParams,model)
defaultParams
params | type | usage | vital |
---|
TIMEOUT_SEC | number | 默认的请求超时时间, 单位为毫秒. 默认10*1000 | 非必选 |
MSG_DURATION | number | 默认的成功或错误信息的展示市场, 单位为秒, 默认2 | 非必选 |
ERR_DEFINE | function(response) | 非http错误的其他业务错误的定义, 比如response.status===false之类 | 非必选 |
SUCC_MSG | function(response) | 请求成功后展示的提示信息内容的定义, 比如response.message | 非必选 |
ERR_MSG | function(response) | 请求失败后展示的提示信息内容的定义, 比如response.message | 非必选 |
updateState
params | type | usage | vital |
---|
callback | function(state) | 用于修改redux的某个namespace键值 | 必选 |
getAsyncData
params | type | usage | vital |
---|
service | object | 异步请求的service信息 | 必选 |
data | object | 异步请求的request.body信息 | 非必选 |
const response = await getAsyncData(services.updateUsers, data);
console.log(response)
service
params | type | usage | vital |
---|
namespace | string | redux的namespace键值 | 必选 |
url | string | 请求的url地址, 支持以{}为包裹的模板值, 比如url='/api/getPageNum/{pagenum}', data={pagenum:1, pagesize: 10}. 发送是url会被替换成'/api/getPageNum/1', data会被替换成{pagesize: 10} | 必选 |
options | object | 请求的options信息, 同fetch | 必选 |
timeoutSec | number, false | 同defaultParams的TIMEOUT_SEC. 未空时获取defaultParams的值. 为false是无超时控制 | 非必选 |
errDefine | function(response),true | 同defaultParams的ERR_DEFINE, 为空时没有定义.为true时获取defaultParams的值 | 非必选 |
succMsg | function(response),true | 同defaultParams的SUCC_MSG, 为空时没有定义,为true是获取defaultParams的值 | 非必选 |
errMsg | function(response),true | 同defaultParams的ERR_MSG, 为空时没有定义,为true是获取defaultParams的值 | 非必选 |
save | function(state, response), string | 在存储到redux之前对返回值做处理. 为string时, 不对response做处理, 整体存储在redux.namespacesave下. 如果为function时, 方法的返回值为redux.namespace. 为空时不保存 | 非必选 |
export const functionSave = {
namespace: 'test',
url: '/users',
options: {
method: 'GET'
},
save: (state, response) => ({ ...state, functionSave: { id: response.result[0].id } })
}