connect function upgrade to component

[ghost]

Default case use of connect:

class Table extends Component{
    constructor(props){ /* some code */ }
    componentWillReceiveProps(props){ /* update local state */ }
    render(){ /* some JSX */}
}

export default connect(
    function stateToProps(){},
    function dispatchToProps(){})
(Table);

By SOLID need:

Table.jsx

import React,{Component} from 'react';
import {connect} from 'react-redux';

class Table extends Component{
    constructor(props){ /* some code */ }
    componentWillReceiveProps(props){ /* update local state */ }
    render(){ /* some JSX */}
}

export default Table;

App.jsx

import React,{Component} from 'react';
import {createStore} from 'redux';
import { connect,Provider } from 'react-redux';
//note!!!
import ConnectComponent from './ConnectComponent';

import store from './Store';
import state1 from './states/state1';
import state2 from './states/state2';
import dispatch from './actions/action1';

import Table from './components/Table';

class App extends Component {

    render(){
        return (
            <Provider store={store}>
                <>
                    <!-- note ConnectComponent -> connect !!! -->
                    <ConnectComponent 
                       state={state1} 
                       dispatch={dispatch} 
                       component={Table}/>
                    <ConnectComponent 
                       state={state2} 
                       dispatch={dispatch} 
                       component={Table}/>
                </>
            </Provider>
        );
    }
}

export default App;

Note!!! connect as component ( this code is not perfect, but i show my way )
ConnectComponent.jsx

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

export default function ConnectComponent(props){
    let C = connect( props.state,props.dispatch)(props.component);
    return (<C/>);
}

For combine mapToState func. and dispath. func need some function, example:

let combine = (userArgs)=>(connectArgs)=>{
    
    let resultObj = {};
    for(let key in userArgs){
        resultObj[key] = userArgs[key].call(this,connectArgs);
    }
    return resultObj;

}

class App extends Component {

    render(){
        return (
            <Provider store={store}>
                <>
                    <ConnectComponent 
                       state={ combine({rows:state1,rows1:state2}) } 
                       dispatch={combine({action1:dispatch})} 
                       component={Table}/>
                    <ConnectComponent 
                       state={ combine({rows:state2}) } 
                       dispatch={dispatch} 
                       component={Table}/>
                </>
            </Provider>
        );
    }
}

export default App;

My proposal have one problem - HOC in HOC )

I think, i can propose this feature in other time in TS code and integrate in react-redux, for fix HOC in HOC. If it is true way. But need some time ) What do you say?

[markerikson]

I'm not exactly sure what you're proposing here.

We're happy with the current connect() API for now. We're open to discussing alternative API proposals after the upcoming v6 release is done.

Please see #1063, #950, and #799 for related discussion.