首先创建models文件夹
符合以下规则的文件会被认为是 model 文件：
- src/models 下的文件
- src/pages 下，子目录中 models 目录下的文件
- src/pages 下，所有model.ts 文件(不区分任何字母大小写)
然后在models文件夹写以下代码
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;
在.umirc.ts进行开启
dva: { immer: true, }
在其他组件进行使用
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);
如何实现增删改的一个效果
models.ts文件中写以下代码
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;
组价文件中写以下代码
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);
