dva-reset-state

KO | EN

gitlite — search

#javascript #python #ai #typescript #golang #deep-learning #macos #java #kubernetes #security #pytorch #mcp #ios #openai

dva-reset-state

(★ 8)

dva plugin reset state

dva-reset-state 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# dva-reset-state

> dva reset state plugin , 页面离开清理 dva 或 redux 中相关数据

[![NPM](https://img.shields.io/npm/v/dva-reset-state.svg)](https://www.npmjs.com/package/dva-reset-state) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```
npm install --save dva-reset-state
```

## Usage

- 注册 src/index.tsx

```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', // 随意填写个字符串，否则报错
});
```

- 在需要重置状态的组件中使用

1. class 组件

```
import { resetStateWillUnmount } from "dva-reset-state";

@connect() // connect必须写在resetState上面
@resetStateWillUnmount("product")
export default class SQLManage extends Component<any> {
  render(){
    return <div>uuu</div>
  }
}
```

2. 函数组件

```
import React from "react";
import { useResetStateWillUnmount } from "dva-reset-state";

const EditProduct = () => {
  useResetStateWillUnmount({ editProduct: "productInfo" });
  return <div>ooo</div>;
};

export default EditProduct;
```

3. 在任何事件或函数中使用

- 函数组件

```
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>
          );
    }
}

```

## 重置哪些数据？

1. 重置所有 state,不传递参数

```
@resetStateWillUnmount()

useResetStateWillUnmount();
```

2. 重置单个 namespace 数据

```
@resetStateWillUnmount("editProduct")

useResetStateWillUnmount("editProduct");
```

3. 重置多个 namespace 下的所有数据

```
@resetStateWillUnmount(["productList","editProduct"])

useResetStateWillUnmount(["productList","editProduct"]);
```

4. 重置单个 namespace 下的单个数据

```
@resetStateWillUnmount({productList:"list"})

useResetStateWillUnmount({productList:"list"});
```

5. 重置单个 namespace 下的多个数据

```
@resetStateWillUnmount({productList:["list","total"]})

useResetStateWillUnmount({productList:["list","total"]});
```

6. 重置多个 namespace 下的多个数据

```
@resetStateWillUnmount({productList:["list","total"],editProduct:"productInfo"})

useResetStateWillUnmount({productList:["list","total"],editProduct:"productInfo"});
```

7. 重置某些 namespace 下所有字段或者重置某些 namespace 下部分字段

```
@resetStateWillUnmount(['userList', { productList: ['list', 'pageInfo'] }])

useResetStateWillUnmount(['userList', { productList: ['list', 'pageInfo'] }]);
```

8. 重置给定 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

dva-reset-state

dva-reset-state 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

dva-reset-state

dva-reset-state 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README