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