标签：支付宝 splay job none href ram 用法 mes 代码
基于 redux、redux-saga 和 react-router 的轻量级前端框架，是支付宝前端应用架构的发展和选择。
主要代码由4个部分组成：router,modle,routes,service。
此时，我按照我们项目目前应用某一模块举例（安全联动项目二期指标管理）
1、route，添加路由配置，示例代码如下：
{
path: ‘indexmanage/editindex‘,
getComponent (nextState, cb) {
require.ensure([], require => {
registerModel(app, require(‘./models/indexmanage/editindex‘))
cb(null, require(‘./routes/indexmanage/editindex/‘))
}, ‘editindex‘)
},
},
2、model 是 dva 中最重要的概念，其主要包含 5 个属性：
1）namespace
model 的命名空间，同时也是他在全局 state 上的属性，只能用字符串，不支持通过 . 的方式创建多层命名空间。
2）state
初始值，每当state改变时，重新刷新页面。
3）subscriptions
在初始化时候执行，例如：
subscriptions: {
setup ({ dispatch, history }) {
history.listen((location) => {
if (location.pathname === ‘/indexmanage/editindex‘) {
dispatch({ type: ‘changeworkModalclose‘ })
}
})
},
},
4）reducers
修改state状态，且是唯一能够修改state状态的地方。
5）effects
用于处理异步操作和业务逻辑，不直接修改 state，可以应用call和put调用相关方法，一般情况下call调用service方法，put调用本文件方法。
modle全部示例代码如下：
import { addAssessmentIndex} from ‘services/editindex‘
import { browserHistory } from ‘react-router‘
export default {
namespace: ‘editindex‘,
state: {
tableTime: ‘‘,
workModal: {
visible: false,
},
},
subscriptions: {
setup ({ dispatch, history }) {
history.listen((location) => {
// 初始进入页面时,根据业务进行相关方法的执行
if (location.pathname === ‘/indexmanage/editindex‘) {
location.state.record && dispatch({ type: ‘changeworkModal‘, payload: { ...location.state.record.jobGenerationRule } })
}
})
},
},
effects: {
* changeStates ({
payload,
}, { put }) {
yield put({ type: ‘updateStates‘, payload })
},
* updateSubdivisionIndex ({ payload }, { put, call, select }) {
const { fileModal } = yield select(state => state.editindex)
const { form } = payload
payload = { ...payload, referenceFile: fileModal.selectedRowKeys.join(‘,‘) }
const res = yield call(updateSubdivisionIndex, payload)
console.log(‘res.success‘, res.success)
if (res.success) {
yield put({ type: ‘subdivisionSuccess‘, payload: { form } })
}
},
// 修改、新增细分指标成功后再跳转
* subdivisionSuccess ({ payload }, { put }) {
const { form } = payload
yield put({ type: ‘changefileModalclose‘ })
yield put({ type: ‘changefileModal‘, payload: { subdivisionloading: false } })
browserHistory.goBack()
form.resetFields
},
},
reducers: {
updateStates (state, { payload }) {
const statr = {
...state,
...payload,
}
return statr
},
// 当state里面对象包含其它对象时，此时应该用如下方法改变state的状态，否则会清空其它值
updatefileModal (state, { payload }) {
const { fileModal } = state
const newState = {
...state,
fileModal: { ...fileModal, ...payload },
}
return newState
},
},
}
3、routes，主要是渲染页面组件：
import React from ‘react‘ import PropTypes from ‘prop-types‘ import { connect } from ‘dva‘ const Dditindex = ({ editindex, location, dispatch, }) => { const Parameters = location.state return ( <div> <AssessmentIndex Parameters={Parameters} editindex={editindex} dispatch={dispatch} /> </div> ) } Dditindex.propTypes = { location: PropTypes.object, editindex: PropTypes.object, dispatch: PropTypes.func, } export default connect(({ editindex }) => ({ editindex }))(Dditindex)
4、service，主要用于发送异步请求获取数据：
import { request } from ‘utils‘
import { api } from ‘./api‘
export async function deleteSubdivisionIndex (params) {
return request(api.deleteSubdivisionIndex, { data: params })
}
export async function addSubdivisionIndex (params) {
return request(api.addSubdivisionIndex, { data: params, showMsg: true })
}
本项目是利用项目封装的request方法通过feach方式发起异步请求，大家可以根据自己需要采用其它方式。
标签：支付宝 splay job none href ram 用法 mes 代码
原文地址：http://www.cnblogs.com/baiyuer666/p/7793820.html
