React-redux, connect по-новому, разделение отвественности в компонентах

При написании SPA с помощью связки react-redux, для работы с redux используют функцию connect в файле react компонента для проброски стейта и «диспатча». Вся боль в том, что «коннекторы» и «диспатчеры» многие описывают там же, в компоненте. В этой статье я опишу connect по новому, и покажу простой способ разделения кода. Базовое использование connect выглядит так:

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 connect(
    function stateToProps(){},
    function dispatchToProps(){})
(Table);

Как в hello world, мы оборачиваем компонент в connect + stateToProps + dispatchToProps. Юзабельность такого кейса оставляет желать лучшего. Для гибкой манипуляции и повторного использования кода — «разделяем и властвуем».

Отделив stateToProps и dispatchToProps от компонента и немного преобразовав подход у connect, мы сможем независимо друг от друга использовать stateToProps и dispatchToProps и компоненты.
Это будет выглядеть так:

Компонент Table

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

import React,{Component} from 'react';
import {createStore} from 'redux';
import { connect,Provider } from 'react-redux';
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}>
                <>
                    <ConnectComponent 
                       state={state1} 
                       dispatch={dispatch} 
                       component={Table}/>
                    <ConnectComponent 
                       state={state2} 
                       dispatch={dispatch} 
                       component={Table}/>
                </>
            </Provider>
        );
    }
}

export default App;

Компонент ConnectComponent немного преобразует работу с connect, позволяя по другому использовать HOC connect.

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/>);
}

На текущий момент минус заключается в том, что мы получаем еще одну обертку в DOM дереве, еще один HOC. Это временно, так как функцию connect можно апдейтнуть )

Автор: Возле ректора

Источник