dva development, simply write, and configure different servers packed instruction

Installation dva-cli

Npm i dva $-cli -g 
$ dva -v

Create a new application

$ dva new project
$ cd project
$ npm start

Configure the interface and packaging environment

cross-env address

# Install the plug- 
$ npm i cross-env

Modify .webpackrc.js

export default {
  define: {
    'process.env': {
      API_URl: process.env.API_URl
    }
  },
  env: {
    development: {
      extraBabelPlugins: ['dva-hmr']
    }
  }
}

Configuration instructions package.json

I approach this relatively cheap, we all know that when packaged according to package instructions, production and development environment automatically modify the server address,

Get Interface address automatically via a variable

"scripts": {
    "start": "cross-env API_URl=http://development.com roadhog server",
    "build": "cross-env API_URL=http://production.com roadhog build",
    "devbuild": "cross-env API_URL=http://development.com roadhog build",
    "lint": "eslint --ext .js src test",
    "precommit": "npm run lint"
}

# Start Service 
$ Start the Yarn 
# test service package 
$ Build the Yarn 
# formal service package 
$ yarn devbuild

Environmental test package

Testing and Development

 

Production server package

Test docking interface, webpack covering configuration reference  documents 

Configuration interface agent and the alias .webpackrc.js

const path = require('path')
export default {
  define: {
    'process.env': {
      API_URL: process.env.API_URL
    }
  },
  env: {
    development: {
      extraBabelPlugins: ['dva-hmr']
    }
  },
  alias: {
    '@': path.resolve(__dirname, 'src')
  },
  proxy: {
    '/api': {
      target: process.env.API_URL,
      changeOrigin: true,
      pathRewrite: { '^/api': '' }
    }
  }
}

services file, add files home.js 

import request from '../utils/request'
export async function newArticle() {
  return request('/api/new_article')
}

Debug Interface

routes folder, modify IndexPage.js

import React, { useEffect } from 'react'
import { connect } from 'dva'
import styles from './IndexPage.css'
import { newArticle } from '@/services/home'
function IndexPage() {
  useEffect(() => {
    newArticle().then(res => {
      console.log(res)
    })
  }, [])
  return (
    <div className={styles.normal}>
      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
    </div>
  )
}

export default connect()(IndexPage)

Print reference

Remember: a production environment you need to configure the proxy agent forwards in ngiux, otherwise the interface requested address is not right 

Use model 

Another model folder created user.js

import { newArticle } from '@/services/home'
export default {
  namespace: 'user',
  state: {
    list: []
  },
  effects: {
    *getArticleList(_, { put, call }) {
      const res = yield call(newArticle)
      yield put({
        type: 'articleLists',
        data: res.data.data
      })
    }
  },
  reducers: {
    articleLists(state, data) {
      return { ...state, ...{ list: data.data } }
    }
  }
}

Index.js modification of 3. Model  

import dva from 'dva'
import './index.css'

// 1. Initialize
const app = dva()

// 2. Plugins
// app.use({});

// 3. Model
// app.model(require('./models/example').default)
app.model(require('./models/user').default)

// 4. Router
app.router(require('./router').default)

// 5. Start
app.start('#root')

IndexPage.js modify the routes in the folder

import React, { useEffect } from 'react'
import { connect } from 'dva'
import styles from './IndexPage.css'

function IndexPage(props) {
  useEffect(() => {
    props.articleList()
  }, [])
  console.log(props.list)
  return (
    <div className={styles.normal}>
      <h1 className={styles.title}>Yay! Welcome to dva!</h1>
      <ul>
        {props.list.map(item => (
          <li key={item.title}>{item.title}</li>
        ))}
      </ul>
    </div>
  )
}

export default connect(
  ({ user }) => {
    return {
      list: user.list
    }
  },
  dispatch => ({
    articleList() {
      dispatch({
        type: 'user/getArticleList'
      })
    }
  })
)(IndexPage)