The use of @umijs/plugin-dva in umi
First create the models folder
Files that meet the following rules are considered model files:
- Files under src/models
- Under src/pages, the files under the models directory in the subdirectory
- Under src/pages, all model.ts files (do not distinguish between any letter case)
Then write the following code in the models folder
import {
Effect, ImmerReducer, Reducer, Subscription } from 'umi';
export interface IndexModelState {
name: string;
}
export interface IndexModelType {
namespace: 'index';
state: IndexModelState;
effects: {
query: Effect;
};
reducers: {
save: Reducer<IndexModelState>;
// 启用 immer 之后
// save: ImmerReducer<IndexModelState>;
};
subscriptions: {
setup: Subscription };
}
const IndexModel: IndexModelType = {
namespace: 'index',
state: {
name: '',
},
effects: {
*query({
payload }, {
call, put }) {
},
},
reducers: {
save(state, action) {
return {
...state,
...action.payload,
};
},
// 启用 immer 之后
// save(state, action) {
// state.name = action.payload;
// },
},
subscriptions: {
setup({
dispatch, history }) {
return history.listen(({
pathname }) => {
if (pathname === '/') {
dispatch({
type: 'query',
});
}
});
},
},
};
export default IndexModel;
Open in .umirc.ts
dva: {
immer: true,
}
use in other components
import React from 'react';
import {
IndexModelState, ConnectRC, Loading, connect } from 'umi';
interface PageProps {
index: IndexModelState;
loading: boolean;
}
const IndexPage: ConnectRC<PageProps> = ({
index, dispatch }) => {
const {
name } = index;
return <div>Hello {
name}</div>;
};
export default connect(
({
index, loading }: {
index: IndexModelState; loading: Loading }) => ({
index,
loading: loading.models.index,
}),
)(IndexPage);
How to achieve an effect of addition, deletion and modification
Write the following code in the models.ts file
import {
Effect, ImmerReducer, Reducer, Subscription } from 'umi';
const IndexModel: IndexModelType = {
namespace: 'index',
state: {
todolist: [
{
id: 1,
name: "蜘蛛侠",
age: 18,
},
{
id: 2,
name: "钢铁侠",
age: 18,
},
{
id: 3,
name: "蝙蝠侠",
age: 18,
}
],
},
effects: {
*query({
payload }, {
call, put }) {
},
},
reducers: {
// 启用 immer 之后
save(state, action) {
return {
...state,
...action.payload,
};
},
pushtodolist(state, action) {
// console.log(state, action);
state.todolist.push(action.action)
// return {
// ...state,
// ...action.payload,
// };
},
deletetodolist(state, action) {
state.todolist = state.todolist.filter((res, index) => {
return res.id != action.action
})
},
edittodolistdata(state, action) {
state.todolist = state.todolist.filter((res, index) => {
if (res.id == action.action.id) {
res.name = action.action.name
}
return res
})
}
},
subscriptions: {
setup({
dispatch, history }) {
return history.listen(({
pathname }) => {
if (pathname === '/') {
dispatch({
type: 'query',
});
}
});
},
},
};
export default IndexModel;
Write the following code in the pricing file
import React, {
useState } from 'react'
import {
connect } from "umi"
function Index(props: any) {
// 添加
function pushtodolist(event: any) {
if (event.keyCode == 13) {
let obj: any = {
id: Date.now(),
name: event.target.value,
}
// console.log(obj);
props.dispatch({
type: "index/pushtodolist",
action: obj
})
}
}
// 删除
function deletetodolist(id: any) {
props.dispatch({
type: "index/deletetodolist",
action: id
})
}
// 控制修改变成input的弹出框
const [editinput, seteditinput] = useState()
// 修改
function edittodolist(data: any) {
console.log(data);
seteditinput(data.id)
seteditinputafter(data.name)
}
function edittodolistdata(id: any) {
seteditinput("")
let obj ={
id:id,
name:editinputafter
}
props.dispatch({
type: "index/edittodolistdata",
action: obj
})
}
// 控制修改之后的值
const [editinputafter, seteditinputafter] = useState("")
function onchangetodolist(e: any) {
seteditinputafter(e.target.value)
}
return (
<div>
<input type="text" onKeyDown={
pushtodolist} />
{
props.todolist123.map((res: any) => {
return <div key={
res.id}>{
res.name}<button onClick={
() => {
deletetodolist(res.id) }}>删除</button>
<button style={
{
display: editinput == res.id ? "none" : "" }} onClick={
() => {
edittodolist(res) }}>修改</button>
<button style={
{
display: editinput == res.id ? "" : "none" }} onClick={
() => {
edittodolistdata(res.id) }}>确定</button>
<input style={
{
display: editinput == res.id ? "" : "none" }} type="text" defaultValue={
res.name} onChange={
onchangetodolist} /></div>
})
}
</div >
)
}
export default connect((state: any) => {
return {
todolist123: state.index.todolist
}
},
)(Index);