DvaJs
优点：简化redux操作流程，集成redux-saga中间件
- effects 异步 通过generator函数定义，所以要加 * 号， 类似于vueX中的action
- reducers 类似于vueX中的mutation
在umi中使用dva要先找到 @umijs/plugin-dva
注意！！会以文件名作为命名空间
- 首先在config.ts文件开启
dva: {
immer: true,
hmr: false,
},
src目录下建一个models文件夹
在页面组件中引入connect 注意要先在models下建好仓库文件并抛出对象
不用connect的话可以通过useDispatch获取dispatch；useStore获取store运行时为了方便查看数据变动可下一个日志包 yarn add redux-logger @types/redux-logger
在app.tsx中进行配置
import { createLogger } from 'redux-logger';
import { message } from 'antd';
export const dva = {
config: {
onAction: createLogger(),
onError(e: Error) {
message.error(e.message, 3);
},
},
};
- 页面获取数据时
在effects中定义方法例如 * getList （注意定义成generator函数）
定义数据类型其中umi中有很多内置类型 参考以下用例
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;
在effects中
函数接受两个参数（接收到的数据，{此参数可以解构出call，put等方法}）
- call方法用来发起请求 它的第一个参数是引入的services文件夹下的文件中的请求函数，第二个参数为请求时要携带的参数比如分页的page
- put方法负责派发reducers 通过type判断派发哪个函数
effects: {
*query({ payload }, { call, put }) {
const {data}=yield call(请求函数,{page:1,pageSize:10})
console.log(data);
yield put({
type:'reducers中想要调用的函数名',
payload:data
})
},
},
然后使用reducers异步修改state中的数据
reducers中的函数的第二个参数就是put传过来的对象，可以解构出payload
return 返回的状态会合并到state中
reducers: {
setList(option,{payload}){
return {
//list:赋值
}
}
}
- 回到页面组件补充connect()()第一个圆括号中的参数
connect链接后可以从props中结构出dispatch
import {useEffect} from "react"
useEffect(()=>{
dispatch({
type:”仓库文件名/函数名"
})
},[])
connect((data)=>data)()
