在项目中接入dva
1. 创建一个models文件夹，并在内创建一个ts文件models/dep.ts
export default {
namespace: 'dep',
state: {
depList: [],
},
effects: {
*getDep({payload}, {put, call}) {
const data = yield call(setTimeout);
yield put({
type: 'updateState',
payload: {depList: data},
});
},
},
reducers: {
updateState(state, {payload}) {
return {...state, ...payload};
},
},
};
2. 在models内创建index.ts文件models/index.ts将所有的model导出
import dep from './dep';
import dep1 from './dep1';
export default [dep, dep1];
3. 创建一个dva配置文件 dva.ts，初始化dva配置
import {create} from 'dva-core';
import immer from 'dva-immer';
let app: any;
const createApp = (opt: any) => {
app = create(opt);
app.use(immer());
if (!(global as any).registered) {
opt.models.forEach((model: any) => {
app.model(model);
});
}
(global as any).registered = true;
app.start();
const store = app._store;
app.getStore = () => store;
const dispatch = store.dispatch;
app.dispatch = dispatch;
return app;
};
export default {
createApp,
getDispatch() {
return app.dispatch;
},
};
4. 导入第2步的models，完成dva初始化
import dvaCore from './dva';
import models from '../models';
const dva = dvaCore.createApp({
initialState: {},
models: models,
});
const store = dva.getStore();
export default store;
5. 在app根目录包裹所有组件
import { Provider } from 'react-redux';
import store from './store';
return <Provider store={store}>
{children}
</Provider>
符合以下规则的文件会被认为是 model 文件，
src/models 下的文件src/pages 下，子目录中 models 目录下的文件src/pages 下，所有 model.ts 文件(不区分任何字母大小写)
src
models/a.ts
pages
foo/models/b.ts
bar/model.ts
dva配置
dva: {
immer: true,
hmr: false,
}
skipModelValidate
- Type: boolean
是否跳过 model 验证。
extraModels
- Type: string[]
配置额外到 dva model。
immer
- Type: boolean | object
表示是否启用 immer 以方便修改 reducer。
如需兼容 IE11，需配置{ immer: { enableES5: true }}。
hmr
- Type: boolean
表示是否启用 dva model 的热更新。
lazyLoad
- Type: boolean
懒加载 dva models，如果项目里 models 依赖了 import from umi 导出模块，建议开启，避免循环依赖导致模块 undefined 问题。
umi常用接口
connect
绑定数据到组件。
getDvaApp
获取 dva 实例
useDispatch
hooks 的方式获取 dispatch
useSelector
hooks 的方式获取部分数据
useStore
hooks 的方式获取 store
model 用例
import type { Effect, ImmerReducer, Reducer, Subscription } from 'umi';
export interface HomeModelState {
name: string,
age: number,
}
export interface HomeModelType {
namespace: 'home';
dva: {
immer: true,
hmr: false,
lazyLoad: true,
},
effects: {
query: Effect;
};
state: HomeModelState;
reducers: {
// 启用 immer 之后
save: ImmerReducer<HomeModelState>;
// 未启用 immer
setData: Reducer<HomeModelState>;
};
subscriptions: { setup: Subscription };
}
const HomeModel: HomeModelType = {
namespace: 'home',
state: {
name: 'code',
age: 19
},
effects: {
*query({ payload }, { call, put }) { },
},
reducers: {
save(state, action) {
state.name = action.payload;
// 注意，此处一定要返回新的state
return state;
},
setData(state, action) {
return {...state, ...action.payload};
}
},
subscriptions: {
setup({ dispatch, history }) {
return history.listen(({ pathname }) => {
if (pathname === '/') {
dispatch({
type: 'query',
});
}
});
},
},
dva: {
immer: true,
hmr: false,
lazyLoad: true,
}
};
export default HomeModel;
page用例
通过useSelector, useDispatch的方式使用state数据
import { useSelector, useDispatch } from 'dva';
const dispatch = useDispatch();
const {name}: any = useSelector(state => state.home);
console.log(name);
useEffect(() => {
dispatch({
type: 'home/save',
payload: {name: '开心就好'},
})
}, [])
