2.1.1 • Published 2 years ago

ux-redux-module v2.1.1

Weekly downloads
-
License
ISC
Repository
-
Last release
2 years ago

ux-redux-module

面向对象redux, 在线 demo, demo源码

React, hook, 函数组件


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

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

引入:

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

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

在组件中使用:

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>
    )
}
2.1.1

2 years ago

2.0.2

2 years ago

2.1.0

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.1.0

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.7

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.3

4 years ago

1.0.0

4 years ago