dva基本用法

Posted 2020-10-15 白鱼儿

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

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方式发起异步请求，大家可以根据自己需要采用其它方式。