# ux-redux-module

> 面向对象redux, [在线 demo](https://hahahahx.github.io/ux-redux-module/), [demo源码](https://github.com/Hahahahx/ux-redux-module/tree/master/example)

Latest version **2.1.1** (published 2022-07-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install ux-redux-module
pnpm add ux-redux-module
yarn add ux-redux-module
bun add ux-redux-module
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.1 |
| Published | 2022-07-02 |
| First published | 2020-10-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 26 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | uxxx |

## Links

- npm: https://www.npmjs.com/package/ux-redux-module
- npm.io page: https://npm.io/package/ux-redux-module

## Dependencies (3)

- [redux](https://npm.io/package/redux.md) ^4.2.0
- [crypto-js](https://npm.io/package/crypto-js.md) ^4.0.0
- [crypto-browserify](https://npm.io/package/crypto-browserify.md) ^3.12.0

## Recent versions

- 2.1.1 (latest) — 2022-07-02
- 2.1.0 — 2022-07-02
- 2.0.2 — 2022-07-02
- 2.0.1 — 2022-06-24
- 2.0.0 — 2022-06-24
- 1.1.0 — 2020-11-20
- 1.0.9 — 2020-11-03
- 1.0.8 — 2020-10-21
- 1.0.7 — 2020-10-21
- 1.0.6 — 2020-10-21
- 1.0.5 — 2020-10-19
- 1.0.4 — 2020-10-19
- 1.0.3 — 2020-10-19
- 1.0.2 — 2020-10-19
- 1.0.1 — 2020-10-19
- … 1 more at https://npm.io/package/ux-redux-module/versions

## README

# ux-redux-module

面向对象redux, [在线 demo](https://hahahahx.github.io/ux-redux-module/), [demo源码](https://github.com/Hahahahx/ux-redux-module/tree/master/example)

React, hook, 函数组件

-----------------------------

在该项目的状态管理中，约束用户必须采用`面向对象`的形式来编写，这有助于
更好的管理项目，面向对象的形式使我们更能清晰的看见状态的结构。

```typescript
@Module
class FileModule extends BaseModule {

    @LocalStorage
    @SesstionStorage
    filename = 'FileModule';

    @SesstionStorage
    fileType = 'txt' 
 

    reqFilebyUpdate() {
        this.filename = 'FileModule被Update更新了';
        this.fileType = 'update'
        this.update()
    }
}
```

模块类需要继承基础模块`BaseModule`，以及加装饰器`@Module`，之后可以在类内部使用`this.update()`方法来提交该模块状态的更新

被`@SessionStorage`和`@LocalStorage`装饰的字段会被注册到内存和本地中。<br/>
提供了`deleteSession(property:string)`和`deleteLocal(property:string)`可以让你自由的删除他们。<br/>
你需要确保你不会在你的事件流中使用到被删除的属性。因为被装饰的属性会不断的在更新状态中更新对应的Local或Session

引入:

```js

const module = { FileModule }; 
ReactDOM.render(
    <ReduxProvider value={module}>
        <div>可以刷新网页，对状态加了 @SesstionStorage 会保存到SesstionStorage中</div>
        <App />
    </ReduxProvider>,
    document.getElementById("root")
);

```

引入ReduxProvider，传入状态module，可以对module推测类型，方便后续在组件中更好的使用。

在组件中使用：

```js

const Main = () => {

    const fileModule = useModule(FileModule)

    return (
        <div style={{ textAlign: 'center' }}>
            <div className='page'>
                FileModule-filename:{fileModule.filename}
            </div>
            <Button ghost onClick={() => {
                fileModule.reqFile()
            }}>ChangeFileModuleByAction</Button>
            <Button ghost onClick={() => {
                fileModule.reqFilebyUpdate()
            }}>ChangeUserModuleByUpdate</Button>
        </div>
    )
}
```

---
_Source: https://npm.io/package/ux-redux-module · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._