基于 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')

},

},

View Code

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' })

}

})

},

},

View Code

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

},

},

}

View Code

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 (

}

Dditindex.propTypes = {

location: PropTypes.object,

editindex: PropTypes.object,

dispatch: PropTypes.func,

}

export default connect(({ editindex }) => ({ editindex }))(Dditindex)

View Code

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 })

}

View Code

本项目是利用项目封装的request方法通过feach方式发起异步请求，大家可以根据自己需要采用其它方式。