redux-connect-components

An helper library for react and redux-users.

Install

# NPM
npm install redux-connect-components --save
# Yarn
yarn add redux-connect-components

Usage

ActionRegistry

Initiallly bind all actions to redux as,

import  React  from  "react";
import  ReactDOM  from  "react-dom";
import {Provider  as  ReduxProvider} from  "react-redux";
import  *  as  authactions  from  '...';
import  *  as  fetchactions  from  '...';
import {ActionRegistryBinder,ActionRegistryManager} from  'redux-connect-components/ActionRegistry';

...
...
  
ActionRegistryManager.register({...authactions,...fetchactions});

ReactDOM.render(
	<ReduxProvider  store={store}>
		<React.Fragment>
			<ActionRegistryBinder/>
			...
			...
		</React.Fragment>
	</ReduxProvider>
, document.getElementById('main-container'));

then use actions without any connect code

import  React  from  'react';
import  ActionRegistry  from  'redux-connect-components/ActionRegistry';
import  ConnectedItem  from  'redux-connect-components/ConnectedItem';
...
...

export  default  class  MyComponent  extends  React.Component{

	constructor(props){
		super(props);
		ActionRegistry.fetchUserInfo({....});
	}

	render(){
		return  <div>
			<ConnectedItem paths={{userInfo:['userInfo']}}>
				{p=><div>
					...
				</div>}
			</ConnectedItem>
		</div>
	}
}

ConnectedItem

Class/function and connect method replacement for simple redux-connected code fragments

import  React  from  "react";
import {ConnectedItem} from  'redux-connect-components';
...
...

export  default  class  MyComplexComponent extends  React.Component {

	render(){
		return <React.Fragment>
			<MyDataLoaderLoader/>
			<ConnectedItem  paths={{
				mails:['mydataloader','mails']
			}}>
			{p=>!p.mails?<span>Loading...</span>:
				<List>
				{p.mails.map( (item,ndx) )=> <ListItem key={ndx}>{item.msg}</ListItem>)}
				</List>
			}
			</ConnectedItem>
		</React.Fragment>
	}
}	

is a kind of replacement of

import  React  from  "react";
import {connect} from 'react-redux';
...
...

const MySimpleComponent= p=>!p.mails?<span>Loading...</span>:
	<List>
	{p.mails.map( (item,ndx) )=> <ListItem key={ndx}>{item.msg}</ListItem>)}
	</List>;

const MySimpleComponentConnected=connect(state=>({
	mails:state && state.mydataloader && state.mydataloader.mails
}))(MySimpleComponent);
	
export  default  class  MyComplexComponent extends  React.Component {

	render(){
		return <React.Fragment>
			<MyDataLoaderLoader/>
			<MySimpleComponentConnected/>
		</React.Fragment>
	}
}	

or maybe

import  React  from  "react";
import {connect} from 'react-redux';
...
...

export  default  class  MyComplexComponent extends  React.Component {

	render(){
		const p=this.props;
		return <React.Fragment>
			<MyDataLoaderLoader/>
			{!p.mails?<span>Loading...</span>:
				<List>
				{p.mails.map( (item,ndx) )=> <ListItem key={ndx}>{item.msg}</ListItem>)}
				</List>
			}
		</React.Fragment>
	}
}

export default connect(state=>({
	mails:state && state.mydataloader && state.mydataloader.mails
}))(MyComplexComponent);

The main advantages of this usage

• More understandable when we compare other alternatives,
• Redux connection placed where must be.

ConnectedItem

List version of connected item.

ReduxToState

Connect redux to state.

import  React  from  "react";
import  {ReduxToState}  from  'redux-connect-components';
...
...
export  default  class  AuthChecker  extends  React.Component {

	constructor(props) {
		super(props);
		ActionRegistry.fetchUserInfo({});
		this.state={};
	}

	render= ()=> <React.Fragment>
		<ReduxToState  key={0}  paths={{
			userInfo: ['auth', 'userInfo'],
			checked: ['auth', 'checked'],
			screenSize:['viewport','size']
		}}  bindTo={this}/>
		{this.state.userInfo?<span>User Logged In </span>:<span>User Not Logged In </span>}
	</React.Fragment>;

}

License

This software is licensed under the GNU GENERAL PUBLIC LICENSE license, quoted below.

Copyright 2018 Haydar Rıdvan TEMEL(http://github.com/hrtemel).