https://github.com/zhouyk/glue-redux
Based on redux, simple, friendly, cohesive. Make relevant code appear in close proximity
https://github.com/zhouyk/glue-redux
Last synced: 6 months ago
JSON representation
Based on redux, simple, friendly, cohesive. Make relevant code appear in close proximity
- Host: GitHub
- URL: https://github.com/zhouyk/glue-redux
- Owner: ZhouYK
- License: mit
- Created: 2018-07-31T11:10:27.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-07-21T12:42:34.000Z (about 5 years ago)
- Last Synced: 2025-04-09T20:13:42.215Z (6 months ago)
- Language: JavaScript
- Homepage:
- Size: 259 KB
- Stars: 22
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.com/ZhouYK/glue-redux)
[](https://codecov.io/gh/ZhouYK/glue-redux)
[](https://www.npmjs.com/package/glue-redux)
[](https://www.npmjs.com/package/glue-redux)
[]()
[]()
# glue-redux
基于redux的应用层
*简单、友好、内聚，让相关代码在相近的位置出现*
---
*数据模型*
模型和state的结构是一一对应的.
*获取数据源state中的p3节点*
```js
referToState(model.p1.p3)
```
*更新数据源state中的p3节点*
```js
model.p1.p3(data)
```
红色节点代表被更新的节点
---
## 查看示例
```bash
git clone https://github.com/ZhouYK/glue-redux.git
npm install
npm start
然后访问 http://localhost:8888
```
## API
| 名称 | 用途
| :--- | :---:
| gluer | 定义可维护节点
| destruct | 解构由可维护节点组成的普通对象
## gluer([updater, initialValue]) | [代码](https://github.com/ZhouYK/glue-redux/blob/master/example/models/app/model.js)
> 定义可维护节点，根据入参会有不同的处理
### 入参
| 参数名 | 类型 | 用途 | 示例
| :---- | :---- | :---- | :----
| updater | 函数 | 用于处理数据，强烈建议数据处理的情况不要有超过两种，超过了应提取出来放置别处 | function (data, state) {}
| initialValue | 任意值 | 节点初始值，表明节点的数据结构和数据类型（开发模式下要求必填） | any
### [栗子](https://github.com/ZhouYK/glue-redux/blob/master/example/models/app/model.js)
```js
// 定义model
import { gluer } from 'glue-redux';
const users = gluer((data, state) => [data, ...state], []);
const profile = {
date: gluer(1),
};
const country = gluer('');
const app = {
users,
country,
profile,
};
export default app;
```
👆上面的栗子是gluer的基本用法，如果想进一步**细致地控制数据**可以看这里[gluer的高级用法](https://github.com/ZhouYK/glue-redux/wiki/%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3#gluer)
关于gluer的入参选择，可以有多种模式
```jsx
// 不传参数
const name = gluer(); // 等价于 const name = gluer(data => data)
// 只有一个入参，类型为函数，该函数会用于数据处理
const name = gluer((data, state) => data.substring(1,3));
// 只有一个入参，类型为非函数，该参数会被当做初始值
const name = gluer('initialValue'); // 等价于 const name = gluer(data => data, 'initialValue')
// 两个参数，第一个为数据处理函数，第二个为初始值
const name = gluer((data, state) => { ...state, ...data }, {name: 'initialValue'})
```
## 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)](https://github.com/ZhouYK/glue-redux/wiki/%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3#refertostate)
| hasModel | function | 用于判断传入的内容是否被索引了 | [hasModel(index: any)](https://github.com/ZhouYK/glue-redux/wiki/%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3#refertostate)（和referToState使用一套索引原则，可查看referToState的使用）
### [栗子](https://github.com/ZhouYK/glue-redux/blob/master/example/store.js)
```js
// store.js
import {
createStore, combineReducers,
} from 'redux';
import { destruct } from 'glue-redux';
import model from './model';
const store = createStore(() => {});
const { reducers, referToState, hasModel } = destruct(store)(model);
store.replaceReducer(combineReducers(reducers));
export {
store,
referToState, // 根据reference 获取store中对应的数据，如果没有则返回undefined
hasModel, // 判断reference 是否在store中有对应的数据
};
```
## 使用model进行数据更新
```js
// service.js
import app from './model';
const register = (data) => {
// any operation about data
app.users(data);
};
const service = {
register,
};
export default service;
```
```js
import { referToState } from './store';
import app from './model';
import service from './service';
service.register({
name: '小明',
age: 18,
pet: '猫'
});
console.log('app model的数据为：', referToState(app));
// { users: [{name: '小明', age: 18, pet: '猫'}] }
console.log('app model中的users为：', referToState(app.users));
// [{name: '小明', age: 18, pet: '猫'}]
```
## 扩展文档
| 地址 | 摘要
| :----: | :----:
| [说明文档](https://github.com/ZhouYK/glue-redux/wiki/%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3) | 更加详细说明glue-redux的原理
| [实践说明](https://github.com/ZhouYK/glue-redux/wiki/%E8%BF%9B%E9%98%B6%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97) | 处理异步问题以及如何组织代码
| [react-glux](https://github.com/ZhouYK/react-glux) | 与react的连接库，HOC方式
| [react-glue-redux-hook](https://github.com/ZhouYK/react-glue-redux-hook) | 与react的连接库，包含HOC和hook两种方式
| [设计一个前端数据模型，让数据操作更简单可靠](https://zhuanlan.zhihu.com/p/65322881) | 代码结构设计说明
| [独立数据管理库femo](https://github.com/ZhouYK/femo) | 独立的数据管理库，思路继承于glue-redux
## Author
[ZhouYK](https://github.com/ZhouYK)
## License
[MIT licensed](https://github.com/ZhouYK/glue-redux/blob/master/LICENSE)