README
react-glue-redux
glue-redux的连接库
基于glue-redux的react连接库
安装
npm i react-glue-redux -P
# 包原名为react-glux,1.3.1版本后react-glux改名为react-glue-redux
查看示例
git clone https://github.com/ZhouYK/react-glux.git
npm install
npm start
然后访问 http://localhost:8888
Api
- destruct
代码
destruct(store)(model) |入参
- store(必传)
redux的生成的store对象
- model(必传)
自定义的数据对象,必须是plain object
返回
{ reducers, connect }
包含reducers和connect属性的对象
- reducers
redux中的reducer函数的对象集合,可直接用于combineReducers
- connect 代码
HOC---链接store与组件,帮助组件实时获取数据,向组件注入数据
- reducers
如何使用
// store.js
import {
createStore, combineReducers,
} from 'redux';
import app from './model';
import { destruct } from 'react-glue-redux';
const store = createStore(() => {});
const { reducers, connect } = destruct(store)({ app });
store.replaceReducer(combineReducers(reducers));
export {
store,
connect, // 导出连接React组件的HOC
};
connect(model)(Component)
- model
必须是对象,从state拿到的数据将以该对象的展开结构注入组件
- Component
react组件
如何使用
- 先定义数据模型
// model.js
import { gluer } from 'glue-redux';
const users = gluer((data, state) => [data, ...state], []);
const app = {
users,
};
export default app;
- 在组件中注入数据
// UserList.jsx
import React, { Component } from 'react';
import pt from 'prop-types';
import { connect } from './store';
import model from './model';
class UserList extends Component {
static propTypes = {
users: pt.array.isRequired,
}
renderUsers = () => {
...
}
render() {
return (
<section>
{ this.renderUsers() }
</section>
);
}
}
export default connect(model)(UserList);// model的结构为{ users },注入组件的属性则为this.props.users