Regular Redux Undo
一个微型插件用于 Regular 组件实现Redux的undo、redo。配合rgl-redux
npm install regular-redux-undo rgl-redux
运行要求
- regularjs 0.6.0-beta.1以上版本
- babel 用于构建基于ES6语法的应用
用法
module/store.js
:
Rex;
module/App.js
:
;;; const AppContainer = Regular;
components/App.js
:
; const App = Regular; { return count: statecount ; } dispatch: trueApp;
示例项目
示例项目位于 example
目录,进入example目录后,运行 npm run start && npm run watch
文档
注意
由于rgl-redux在组件初始化的时候并不会调用mapState,所以需要在组件实例化后this.$dispatch('@init/state')
Rex.Store
store的构造函数,接受一个配置对象config,用于创建app的store。
state: count: 0 reducers: { let count = statecount; count++; return Object; } ;
config.undoable
是否可以undo、redo,默认开启。
config.state
store的默认state,这个state是全局的(和模块区分,模块见下面文档)。
config.reducers
store全局reducer(和模块区分,模块见下面文档)。
config.modules
... state: count: 0 modules: moduleA: state: count: 1 reducers: { let count = moduleAcount; count++; return Object; } ...;//全局state会和局部state进行合并,实例中会合成为://state: {// count: 0,// moduleA: {// count: 1// }//} //模块中的reducer注入的state会自动换成module层次的state
注意:如果有模块的时候,全局的state必须是一个对象
config.middlewares
中间件,可用于数据修改无关的操作,例如发送保存请求,记录日志等。
{ //context的方法: dispatch, undo, redo, subscribe, getState //next:只有执行了next()后dispatch才会往下执行} ... middlewares:myMiddleware ...;
config.modifiers
可用于对reducer返回的state做一些改变,业务中经常用于数据关联处理。
{ return state action //do something let newState = ; //do something return newState; //这里要return新的state } ... modifiers:myModifiers ...;
内置dispatch的方法
//回退历史this //store.dispatch("undo")//前进this //store.dispatch("redo")//重置statethis //store.dispatch("@init/state")//替换statethis //store.dispatch("@replace/state")
License
MIT