glue-redux
基于redux的应用层
简单、友好、内聚,让相关代码在相近的位置出现
数据模型
模型和state的结构是一一对应的.
获取数据源state中的p3节点
更新数据源state中的p3节点
modelp1
红色节点代表被更新的节点
查看示例
git clone https://github.com/ZhouYK/glue-redux.gitnpm installnpm start 然后访问 http://localhost:8888
API
名称 | 用途 |
---|---|
gluer | 定义可维护节点 |
destruct | 解构由可维护节点组成的普通对象 |
代码
gluer([updater, initialValue]) |定义可维护节点,根据入参会有不同的处理
入参
参数名 | 类型 | 用途 | 示例 |
---|---|---|---|
updater | 函数 | 用于处理数据,强烈建议数据处理的情况不要有超过两种,超过了应提取出来放置别处 | function (data, state) {} |
initialValue | 任意值 | 节点初始值,表明节点的数据结构和数据类型(开发模式下要求必填) | any |
栗子
// 定义model ; const users = ; const profile = date: ; const country = ; const app = users country profile ; ;
👆上面的栗子是gluer的基本用法,如果想进一步细致地控制数据可以看这里gluer的高级用法
关于gluer的入参选择,可以有多种模式
// 不传参数 const name = ; // 等价于 const name = gluer(data => data) // 只有一个入参,类型为函数,该函数会用于数据处理 const name = ; // 只有一个入参,类型为非函数,该参数会被当做初始值 const name = ; // 等价于 const name = gluer(data => data, 'initialValue') // 两个参数,第一个为数据处理函数,第二个为初始值 const name =
destruct(store)(models)
解构数据对象,与redux进行连接
入参
参数名 | 类型 | 用途 | 示例 |
---|---|---|---|
store | redux的store | 供数据模型使用 | - |
models | object | 数据模型 | { [index: string]: GluerReturn or any} |
返回
- { reducers, actions, referToState, hasModel }
包含reducers和actions属性的对象
属性名 | 类型 | 用途 | 示例 |
---|---|---|---|
reducers | object | reducer组成的对象 | { name: (state, action) => {}, ... } |
actions | object | dispatcher组成的对象 | { name: GluerReturn, ... } |
referToState | function | 用于从state中索引出数据 | referToState(index:any) |
hasModel | function | 用于判断传入的内容是否被索引了 | hasModel(index: any)(和referToState使用一套索引原则,可查看referToState的使用) |
栗子
// store.js;;; const store = ;const reducers referToState hasModel = model;store; ;
使用model进行数据更新
// service.js; const register = { // any operation about data app;};const service = register;;
;;; service;console;// { users: [{name: '小明', age: 18, pet: '猫'}] }console;// [{name: '小明', age: 18, pet: '猫'}]
扩展文档
地址 | 摘要 |
---|---|
说明文档 | 更加详细说明glue-redux的原理 |
实践说明 | 处理异步问题以及如何组织代码 |
react-glux | 与react的连接库,HOC方式 |
react-glue-redux-hook | 与react的连接库,包含HOC和hook两种方式 |
设计一个前端数据模型,让数据操作更简单可靠 | 代码结构设计说明 |