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与组件，帮助组件实时获取数据，向组件注入数据

如何使用

  // 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

Author

ZhouYK

License

MIT licensed