Neatly Packaged Manuals

    redux-connect-binder

    1.1.1 • Public • Published

    redux-connect-binder

    Redux-connect-binder is a library used for simplify the usage of redux/redux-connect. As before, if someone wants to connect a componet, he must write redundant codes for every component, this is so boring. So, I wrapped the mapStateToProps , mapDispatchToProps and connect functions with high-order functions to hide the details. All you need is to add the component you write and some options to the high-order functions. 🍺

    Functions

    1. mapStateWrapper

    // @params: props<Array<String|Array|Object>> "props name mapping array used from redux connect state"
    //          rules_string: /[a-zA-Z0-9]+/
    //          rules_array: [/[a-zA-Z0-9]+/, /([a-zA-Z0-9]+\.)*[a-zA-Z0-9]+/]
    //          rules_array_with_func: [/[a-zA-Z0-9]+/, accessor_func]
    //          rules_object: {name: ([a-zA-Z0-9]+)*, accessor: /([a-zA-Z0-9]+\.)*[a-zA-Z0-9]+/, prefix: true/false}
    //          rules_object_with_func: {name: ([a-zA-Z0-9]+)*, accessor: accessor_func, prefix: true/false}
    //          *warning* prefix is default global, unless you set it to false explicitly.
     
    // @params: prefix<String> "common prefix for props name"
    // rules: /([a-zA-Z0-9]+\.)*[a-zA-Z0-9]+/
    // @return: mapStateToProps<Function>
     
    prefix = 'n';
    props = ['a']; // Assuming prefix is n, mapping: state.n.a => this.props.a
    props = [['a', 'a.b']]; // Assuming prefix is n, mapping: state.n.a.b => this.props.a
    props = [{name: 'a', accessor: 'a.b'}]; // Assuming prefix is n, mapping: state.n.a.b => this.props.a
    props = [['a', (state) => state.x.c]] // mapping: state.a.x.c => this.props.a
    props = [{name: 'a', accessor: (state) => state.x.c]}] // mapping: state.a.x.c => this.props.a
    props = [{name: 'a', accessor: (state) => state.x.c], prefix: false}] // mapping: state.x.c => this.props.a

    2. mapDispatchWrapper

    // @params: actions<Array<Object>> "dispatch action object array"
    // @return: mapDispatchToProps<Function>
     
    actions = [{action1: (dispatch) => dispatch({type: ACTION_TYPE})}, {action2: (dispatch) => dispatch({type: ACTION_TYPE})}]

    3. bindConnector

    // @params: component<React.Component> "the component needs to be connected"
    // @params: props<Array<String>> "props name array used from redux connect state"
    //          rules: /([a-zA-Z0-9]+\.)*[a-zA-Z0-9]+/
    // @params: prefix<String> "common prefix for props name"
    // rules: /([a-zA-Z0-9]+\.)*[a-zA-Z0-9]+/
    // @params: actions<Array<Object>> "dispatch action object array"
    // @return: connectedComponent<React.Component>
    import {bindConnector} from 'redux-connect-binder';
    class component extends React.Component {
        constructor(props) {
            super(props);
        }
        render() {
            // in your code, you can use 
            // props: this.props.a / this.props.a.b / this.props.a.b.c
            // actions: this.props.actions1 / this.props.actions2
            return <div>Hello, World</div>;
        }
    }
    props = ['a', 'a.b', 'b.c.d'];
    prefix = 'a' / 'a.b';
    actions = [{action1: (dispatch) => dispatch({type: ACTION_TYPE})}, {action2: (dispatch) => dispatch({type: ACTION_TYPE})}]
     
    module.exports = bindConnector({component: component, props, prefix, actions});

    Install

    npm i redux-connect-binder

    DownloadsWeekly Downloads

    6

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    17.7 kB

    Total Files

    12

    Last publish

    Collaborators

    • nihilium9