Разработка на React-е

[АртемЫч]

Добрый вечер, форумчане)
Подскажите плиз, сталкиваюсь всегда с одной проблемой...при проверке тестового задания, мне указывают на то что оставляю хэндлеры в разметке... понимаю что этого не должно быть, но как можно кроме этого способа и кроме AddEventListenerа отлавливать события на элементах??

[Царь Леонид]

Вот так вешаются события на элементы в реакте:

<div onClick={тут функция обработчик}></div>

Я правильно вопрос понял?

[АртемЫч]

а какие еще есть варианты? этот способ я и использую...говорят что некорректно использовать хэндлеры в разметке

[Царь Леонид]

Вот такую запись наверное некорректной посчитали

<div onclick={()=>{ тут сама функция }></div>

скорее всего имели ввиду, что функцию надо писать в компоненте и привязывать ее:

<div onClick={this.onClickHandler.bind(this)}></div>

или, если ее вне компонента поставил

<div onClick={onClickHandler()}></div>

[АртемЫч]

а чем плохи EventListener-ы добавленные в компоненте после загрузки DOMа ?

[Царь Леонид]

Тем, что идет работа с DOM напрямую. В реакте виртуальный DOM и приложение должно быть в курсе всех обработчиков и действий с элементами, для корректного рендера. Вообще работа с ДОМом напрямую - это антипаттерн и этого надо избегать.

[АртемЫч]

спасибо за совет, буду переучиваться)) а еще одно замечание было. которое я если честно вообще не понял... писал приложение на react+redux, подключая компоненты контейнеры через connect... мне было замечание что "гружу данные напрямую в connect"... а как иначе?? синтакссис был примерно такой:

const UserLogin = connect(
mapStateToProps,
mapDispatchToProps
)(UserInfo);

[Царь Леонид]

Правильно делать так (если через декоратор)

function mapStateToProps(state){
тут какие-то данные из state
}
function mapDispatchToProps(dispatch){
тут какие-то экшены
}
@connect(mapStateToProps, mapDispatchToProps)
тут сам компонент

[АртемЫч]

function mapStateToProps(state){
тут какие-то данные из state
}
function mapDispatchToProps(dispatch){
тут какие-то экшены
}
@connect(mapStateToProps, mapDispatchToProps)
тут сам компонент

--
тут сам компонент : контейнер или вьюха?

[Царь Леонид]

Контейнер. В нем всё, что было вытащено из этих двух функций будет доступно в props. Собственно connect для того и нужен, чтобы прокидывать что нибудь в компонент. Чтобы стало более понятно, вот типичная структра реакт компонента в редакс:

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

const mapStateToProps = state => {
    return {
        item: state.item,
        color: state.color
    };
};

const mapDispatchToProps = dispatch => {
    return {
        setItemAndColor: (value)=>dispatch(setItemAndColor(value))
    };
};

@connect(mapStateToProps, mapDispatchToProps)
class MyOwnComponent extends Component {

    render() {
        const { item, color, setItemAndColor } = this.props;
        return (
            <div></div>
        );
    }
}

export default MyOwnComponent;