0.1.3 • Published 2 years ago
dva-reset-state v0.1.3
dva-reset-state
dva reset state plugin , 页面离开清理 dva 或 redux 中相关数据
Install
npm install --save dva-reset-state
Usage
- 注册 src/index.tsx
import React, { Component } from 'react'
import createResetState from 'dva-reset-state'
const app: any = dva()
app.use(createResetState())
- 在 umi@3 中使用
app.ts
import { plugin } from 'umi';
import createResetState from 'dva-reset-state';
// 注册插件
plugin.register({
apply: {
dva: {
plugins: [createResetState(true)],// 对于引用类型的字段,重置后每次都返回新的引用,从而触发useEffect的更新
},
},
path: 'any', // 随意填写个字符串,否则报错
});
- 在需要重置状态的组件中使用
- class 组件
import { resetStateWillUnmount } from "dva-reset-state";
@connect() // connect必须写在resetState上面
@resetStateWillUnmount("product")
export default class SQLManage extends Component<any> {
render(){
return <div>uuu</div>
}
}
- 函数组件
import React from "react";
import { useResetStateWillUnmount } from "dva-reset-state";
const EditProduct = () => {
useResetStateWillUnmount({ editProduct: "productInfo" });
return <div>ooo</div>;
};
export default EditProduct;
- 在任何事件或函数中使用
- 函数组件
import React from "react";
import { useResetState } from "dva-reset-state";
const Demo = () => {
const resetState = useResetState()
const onClick = () => {
resetState(["userList", { productList: ["list", "pageInfo"] }]);
};
return (
<div>
<button onClick={onClick}></button>
</div>
);
};
export default Demo;
- class 组件
import React from "react";
import { connect } from "dva";
import { reset } from "dva-reset-state";
@connect()
export default class Demo extends React.Component<any>{
onClick = () => {
reset(this.props.dispatch,["userList", { productList: ["list", "pageInfo"] }]);
};
render(){
return (
<div>
<button onClick={this.onClick}></button>
</div>
);
}
}
重置哪些数据?
- 重置所有 state,不传递参数
@resetStateWillUnmount()
useResetStateWillUnmount();
- 重置单个 namespace 数据
@resetStateWillUnmount("editProduct")
useResetStateWillUnmount("editProduct");
- 重置多个 namespace 下的所有数据
@resetStateWillUnmount(["productList","editProduct"])
useResetStateWillUnmount(["productList","editProduct"]);
- 重置单个 namespace 下的单个数据
@resetStateWillUnmount({productList:"list"})
useResetStateWillUnmount({productList:"list"});
- 重置单个 namespace 下的多个数据
@resetStateWillUnmount({productList:["list","total"]})
useResetStateWillUnmount({productList:["list","total"]});
- 重置多个 namespace 下的多个数据
@resetStateWillUnmount({productList:["list","total"],editProduct:"productInfo"})
useResetStateWillUnmount({productList:["list","total"],editProduct:"productInfo"});
- 重置某些 namespace 下所有字段或者重置某些 namespace 下部分字段
@resetStateWillUnmount(['userList', { productList: ['list', 'pageInfo'] }])
useResetStateWillUnmount(['userList', { productList: ['list', 'pageInfo'] }]);
重置给定 namespace 以外的 state
第三个参数需要设置为 true
@resetStateWillUnmount(['userList', { productList: ['list', 'pageInfo'] }], true)
useResetStateWillUnmount(['userList', { productList: ['list', 'pageInfo'] }], true);
reset(store.dispatch,'userList',true)
reset(store.dispatch,['userList','editProduct'],true)
reset(
store.dispatch,
['userList', { editProduct: ['productInfo'] }]
true
)
License
MIT © balibabu