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.aprops = 'a' 'a.b'; // Assuming prefix is n, mapping: state.n.a.b => this.props.aprops = name: 'a' accessor: 'a.b'; // Assuming prefix is n, mapping: state.n.a.b => this.props.aprops = 'a' state statexc // mapping: state.a.x.c => this.props.aprops = name: 'a' statexc // mapping: state.a.x.c => this.props.aprops = name: 'a' statexc prefix: false // mapping: state.x.c => this.props.a
2. mapDispatchWrapper
// @params: actions<Array<Object>> "dispatch action object array"// @return: mapDispatchToProps<Function> actions =
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';Component { ; } { // 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 = moduleexports = ;