react-glue-redux-hook

glue-redux的连接库（hook版本）

像使用组件状态一样使用redux

安装

npm i react-glue-redux-hoos -P

查看示例

git clone https://github.com/ZhouYK/react-glue-redux-hook.git
npm install
npm start
 
然后访问 http://localhost:8888

Api

• destruct

destruct(store)(model) | 代码

入参

• store(必传)

  redux的生成的store对象

• model(必传)

  自定义的数据对象，必须是plain object

返回

• { reducers, useGlue, connect }

  包含reducers和connect属性的对象

  • reducers

    redux中的reducer函数的对象集合，可直接用于combineReducers

  • useGlue

    react hook，通过它来获取最新的redux的state

  • connect

    HOC---链接store与组件，帮助组件实时获取数据，向组件注入数据

如何使用

  // store.js
  import {
    createStore, combineReducers,
  } from 'redux';
  import app from './models/app/model';
  import book from './models/book/model';
  import DevTool from './DevTool';
  import { destruct } from '../src';
  
  const modelSchemas = { app, book };
  const store = createStore(() => {}, {}, DevTool().instrument());
  const { reducers, useGlue, connect } = destruct(store)(modelSchemas);
  store.replaceReducer(combineReducers(reducers));
  
  export {
    store,
    useGlue,
    connect,
    modelSchemas,
  };
 

useGlue(model: glue)

function component可使用

• model

必须是对象，从state拿到的数据将以该对象的展开结构注入组件

connect(model: glue)(Component: ReactComponent)

所有component都可以使用

• model

必须是对象，从state拿到的数据将以该对象的展开结构注入组件

• Component

react组件

如何使用

• 先定义数据模型

 // model.js
 import { gluer } from 'react-glue-redux-hook';
 
 const users = gluer((data, state) => [data, ...state], []);
 
 const app = {
   users,
 };
 export default app;
 

• 在组件中注入数据（hook模式）

  import React from 'react';
  import pt from 'prop-types';
  import { useGlue, modelSchemas } from '../../store';
  
  const renderUsers = (users) => {
    if (Object.is(users.length, 0)) {
      return (
        <section>
          no users
        </section>
      );
    }
    const list = users.map((user, index) => (
      /* eslint-disable react/no-array-index-key */
      <section
        key={index}
      >
        <div className="row">
          <h4>
            user
            {' '}
            {index}
            :
          </h4>
          <p>
            name:
            {user.name}
          </p>
          <p>
            profession：
            {user.profession}
          </p>
          <p>
            pet:
            {user.pet}
          </p>
        </div>
      </section>
    ));
    return list;
  };
  
  const Index = (props) => {
    // 获取redux中的state
    const [modelState] = useGlue(modelSchemas.app);
    return (
      <section>
        <span>
          { props.test }
        </span>
        { renderUsers(modelState.users) }
      </section>
    );
  };
  
  Index.propTypes = {
    test: pt.string,
  };
  
  Index.defaultProps = {
    test: 'userList component',
  };
  
  export default Index;
 

• 在组件中注入数据（connect模式）

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