DvaJS

DvaJS文档

简介

• routes文件夹下放置路由组件
• 默认使用hash路由，改用BrowserHistory，需要先安装history

$ npm install --save history

• index.js入库文件配置

import {createBrowserHistory as createHistory} from 'history';
const app = dva({
  history: createHistory(),
});

models中的接口

• models文件夹下的文件中的状态可以被共享，但是需要在index.js入口文件中配置：

app.model(require('./models/indexTest').default);

• state的使用

—— models文件夹下的indexTest.js文件：

export default {
    namespace: 'indexTest',
    state: {
        name: 'Jayson'
    }
}

—— 路由组件indexPage.js引用时：

import { connect } from 'dva';
// 或者import { connect } from 'umi'

function IndexPage(props) {
  console.log('props',props)
  return (
    <div className={styles.normal}>
      <h2>{props.name}</h2>  // 显示Jayson
    </div>
  );
}

const myStateToProps = state => {
  console.log(state)
  return {
    msg: '我爱北京天安门',
    name: state.indexTest.name
  }
}
export default connect(myStateToProps)(IndexPage);

• reducer的使用

export default {
    namespace: 'indexTest',
    state: {
        name: 'Jayson'
    },
    reducers: {
    	// payLoad；组件中传来的参数；state：上面的状态
        setName(state, payLoad) {
            console.log(payLoad)
            // 不要在原来地址上修改
            let _state = JSON.parse(JSON.stringify(state))
            _state.name = payLoad.data.name
            return _state
        }
    }
}

IndexPage.js文件：点击按钮后，name已经变为猪猪侠了

 const handleSetName = () => {
   props.dispatch({
     type: 'indexTest/setName',
     data: {
       name: '猪猪侠'
     }
   })
 }
 
<button onClick={handleSetName}>setName</button>

• effects的使用（异步）

const handleSetNameAsync = () => {
  props.dispatch({
    type: 'indexTest/setNameAsync',
    data: {
      name: '猪猪侠'
    }
  })
}

<button onClick={handleSetNameAsync}>setNameAsync</button>

models文件夹下的indexTest.js文件：

export default {
    namespace: 'indexTest',
    state: {
        name: 'Jayson',
        codeData: []
    },
    reducers: {
	    setName(state, payLoad) {
	        console.log(payLoad)
	        let _state = JSON.parse(JSON.stringify(state))
	        _state.name = payLoad.data.name
	        return _state
	    }
    }
    effects: {
    	// put里面传action, call发异步请求
        *setNameAsync({payLoad}, {put, call}) {
            yield put({
                type: "setName",
                data: {
                    name: '超人强'
                }
            })
        }
    }
}

• —— 将接口调用加到异步请求中：

代理服务器的设置 cnodejs.org接口地址

.webpackrc文件：

{
    "proxy": {
        "/apis": {
            "target": "https://cnodejs.org",
            "changeOrigin": true,
            "pathRewrite": {"^/apis": ""}
        }
    }
}

services文件夹下的example.js文件：添加了testCode接口

import request from '../utils/request';
const proxy = "/apis"
export function query() {
  return request('/api/users');
}

export function testCode() {
  return request(proxy + '/api/v1/topics')
  // 请求这个接口时，会将"/apis"替换为"https://cnodejs.org"
}

在routes文件夹下的IndexPage.js 文件中调用接口，拿到数据

import * as apis from '../services/example'

useEffect(() => {apis.testCode().then(res => {
  const {data: result} = res
  console.log(result.data)
})}, [])

在异步请求中调用接口

import * as apis from '../services/example'
export default {
    namespace: 'indexTest',
    state: {
        name: 'Jayson',
        codeData: []
    },
    reducers: {
        setCodeDataList(state, payLoad) {
            let _state = JSON.parse(JSON.stringify(state))
            console.log("payLoad:", payLoad)
            _state.codeData = payLoad.data
            return _state
        }
    },
    effects: {
    	// put里面传action, call发异步请求
        *testCode({payLoad}, {put, call}) {
            let rel = yield call(apis.testCode)
            if(rel.data) {
                yield put({
                    type: 'setCodeDataList',
                    data: rel.data.data
                })
            }
        }
	}
}

IndexPage.js文件发送异步请求：

拿到codeData后，可以展示了

function IndexPage(props) {
	 const handleTestCode = () => {
	   props.dispatch({
	     type: 'indexTest/testCode'
	   })
	 }
  
	return (
		<h2>props.codeData.length</h2>
		<button onClick={handleTestCode}>TestCode</button>
	)

	const myStateToProps = state => {
	  console.log(state)
	  return {
	    msg: '我爱北京天安门',
	    name: state.indexTest.name,
	    codeData: state.indexTest.codeData
	  }
	}
}

export default connect(myStateToProps)(IndexPage);

• subscriptions订阅功能：models中的接口

reducers: {
    testPath(state, payLoad) {
        console.log('用户页reducer')
        return state
    }
},

subscriptions: {
    haha({dispatch, history}) {
        // 初始化时就会执行这个函数
        // 监听到路径发生变化，则dispatch一个action，执行testPath这个reducer
        history.listen(({pathname}) => {
            if(pathname === '/user') {
                console.log('用户页')
                dispatch({
                    type: "testPath"
                })
            }
        })
    }
}

mock：模拟接口

• 在mock文件夹下新建一个文件testMock.js文件，里面写一个接口

module.exports = {
    "Get /api/mockdata": (req, res) => {
        console.log(req)
        res.send({
            msg: "登陆成功"
        })
    }
}

• 在.roadhogrc.mock.js中暴露接口

export default {
    ...require('./mock/testMock')
};

• 在services文件夹中的exapmle.js中注册这个接口

export function mockdata() {
  return request("api/mockdata")
}

• 在routes中的IndexPage.js中调用这个接口

useEffect(() => {
  apis.mockdata().then(res => {
    console.log(res)
  }, err => {
    console.log(err)
  })
}, [])

• —— 请求结果：