当前位置:网站首页>Basic introduction and use of dvajs
Basic introduction and use of dvajs
2022-07-07 01:40:00 【Idle fish_ JavaScript】
Directory structure :
1. Synchronously modify the warehouse value
- src/models/LhTest.ts: Where you define the warehouse
export default {
// Warehouse inventory value ;
state: {
global: ' This is a global',
},
// Synchronous operation place : Modify component common state
reducers: {
// This is your modification state Methods ; Fixed format
changeGlobal(state: Object, {
payload }: any) {
console.log(' This is you through payload The parameters passed in :', payload)
return {
...state,
global: payload,
};
},
},
};
- src/pages/index.tsx: Page call
import {
connect } from 'dva';
import {
Button } from 'antd';
import React,{
useState } from 'react';
const IndexPage = (props: any) => {
// from props To deconstruct global and dispatch Method
const {
global, dispatch } = props;
const [numb, setNumb] = useState(0);
const changeGlobal = (numb:any) => {
setNumb(numb + 1)
// This method is in props Inside
dispatch({
// type: ' You define model name , The default is your file name , You can also customize it : namespace'
// type: / Then your method name , From effects perhaps reducers Go inside ; If the names are the same, then effects In looking for ( That is to say effects Find first in ; If you find it, you'll end the search );
type: 'LhTest/changeGlobal',
// This place is where you spread your knowledge !
payload: numb++
})
}
return (
<>
<Button onClick={
changeGlobal.bind({
}, numb)}>ce {
global }</Button>
</>
);
}
// This step You can think of it this way , stay IndexPage The previous step of page creation ,dva Add a step to it, that is connect The first callback function passed in .
export default connect((state: any) => {
// LhTest yes modal name The default is the file name or your own definition namespace ;
const {
global } = state.LhTest;
return {
global
};
// connect() This function returns a function Accept a page to be rendered ;
})(IndexPage);
2. Modify the warehouse value asynchronously
- src/models/LhTest.ts: Where you define the warehouse
import {
request } from 'umi';
// data Is the passed parameter
const user = (data:any) => {
return request(`/user`, {
method: 'POST',
// Header information
headers: {
},
// json Format
requestType: 'json',
// post Request is for data, get Request is for params
data
});
}
export default {
// Warehouse inventory value ;
state: {
global: ' This is a global',
},
// Synchronous operation place : Modify component common state
reducers: {
// This is your modification state Methods ; Fixed format ; When called ' Module name / Method name '
changeGlobal(state: Object, {
payload }: any) {
console.log(' This is you through payload The parameters passed in :', payload)
return {
...state,
global: payload,
};
},
// In order to test effects Of put Method
handleSomethingReducers(state: Object, {
payload }: any) {
console.log('reducers Methods the trigger ,payload:', payload)
return {
...state
}
}
},
// Asynchronous operation place : Request interface
effects: {
// Method name , When called ' Module name / Method name '
// payload: The parameters you passed ;
*getUserInfo({
payload }: any, {
call, put }: any) {
// call: The asynchronously requested function accepts two parameters ( first 【user】: Functions called asynchronously 【 Request interface 】 the second 【payload】: Pass parameters into your asynchronous function )
// Return interface information
const {
data } = yield call(user, payload);
// Call other methods ( for instance reducers Inside Or is it effects Inside , Or other .)
yield put({
type: 'handleSomethingReducers', payload: {
name: 1 } }); // reducers Methods the trigger ,payload: {name: 1}
yield put({
type: 'handleSomethingEffects', payload: {
name: 2 } }); // effects Methods the trigger ,payload: {name: 2}
},
// In order to test effects Of put Method
*handleSomethingEffects({
payload}:any, {
call, put}: any) {
console.log('effects Methods the trigger ,payload:', payload)
}
},
};
- src/pages/index.tsx: Page call
import {
connect } from 'dva';
import {
Button } from 'antd';
import React,{
useState } from 'react';
const IndexPage = (props: any) => {
// from props To deconstruct global and dispatch Method
const {
global, dispatch } = props;
const [numb, setNumb] = useState(0);
const changeGlobal = (numb:any) => {
setNumb(numb + 1)
// This method is in props Inside
dispatch({
// type: ' You define model name , The default is your file name , You can also customize it : namespace'
// type: / Then your method name , From effects perhaps reducers Go inside ; If the names are the same, then effects In looking for ( That is to say effects Find first in ; If you find it, you'll end the search );
type: 'LhTest/changeGlobal',
// This place is where you spread your knowledge !
payload: numb++
})
dispatch({
type: 'LhTest/getUserInfo',
// This place is where you spread your knowledge !
payload: {
name: 'zs',
age: '46'
}
})
}
return (
<>
<Button onClick={
changeGlobal.bind({
}, numb)}>ce {
global }</Button>
</>
);
}
// This step You can think of it this way , stay IndexPage The previous step of page creation ,dva Add a step to it, that is connect The first callback function passed in .
export default connect((state: any) => {
// LhTest yes modal name The default is the file name or your own definition namespace ;
const {
global } = state.LhTest;
return {
global
};
// connect() This function returns a function Accept a page to be rendered ;
})(IndexPage);
3. Namespace
- You can get multiple folders , It will read by default file Name as default namespace;
- Modular custom name , Normally, the file name is used as the module , But when the name repeats ? Will report a mistake ! Then use namespaces namespace Customize it
The solution is as follows :
add to namespace after
Not added namespace
Print the final result :connect((state)=> {console.log(‘state:’, state)})(IndexPage)
3.xxxx( be on holiday , To be continued …)
边栏推荐
猜你喜欢
Clickhouse fields are grouped and aggregated, and SQL is queried according to the granularity of any time period
永久的摇篮
Comparison of picture beds of free white whoring
The difference between Tansig and logsig. Why does BP like to use Tansig
AcWing 345. Cattle station solution (nature and multiplication of Floyd)
JVM 内存模型
AI automatically generates annotation documents from code
Your cache folder contains root-owned files, due to a bug in npm ERR! previous versions of npm which
黑马笔记---异常处理
Transplant DAC chip mcp4725 to nuc980
随机推荐
dvajs的基础介绍及使用
Mysqlbackup restores specific tables
AcWing 1142. Busy urban problem solving (minimum spanning tree)
Long press the button to execute the function
拖拽改变顺序
Wood extraction in Halcon
AcWing 344. Solution to the problem of sightseeing tour (Floyd finding the minimum ring of undirected graph)
AI automatically generates annotation documents from code
ZOJ Problem Set – 2563 Long Dominoes 【如压力dp】
AcWing 346. Solution to the problem of water splashing festival in the corridor (deduction formula, minimum spanning tree)
安利一波C2工具
IDEA常用的快捷键
The cradle of eternity
Google released a security update to fix 0 days that have been used in chrome
LeetCode:1175. 质数排列
Comparison of picture beds of free white whoring
Yunna | work order management software, work order management software app
黑马笔记---异常处理
Gin introduction practice
盒子拉伸拉扯(左右模式)