Какие есть способы передать событие за компонент? Почему значение из store определяется в компоненте как props?

Question

[vaskadogana]

есть класс

export class IconStar extends React.Component{
	constructor(props) {
		super(props);
		this.state = {
				active: this.props.fix,
				fill: svgicons.starIcon.deactiv,
				class: 'transparent'
		}
		this.fix_it = this.fix_it.bind(this);
		console.log(this.props.fix)
	}
  	fix_it(e){
  		if (this.state.active ==  false){
		  			this.setState({
		  				active: true,
						fill: svgicons.starIcon.active,
		  			}).bind(fixation);	
  		}
  		if (this.state.active == true){
		  			this.setState({
		  				fill: svgicons.starIcon.deactiv,
		  				active: false,
		  			});
		}
		var css = (this.state.class === "transparent") ? "show" : "transparent";
	    this.setState({"class":css});
  	}
	render(){
		return(
			<div>
			<svg 
				className={"star_icon" + " " + this.state.class}
				xmlns="http://www.w3.org/2000/svg"  
				aria-labelledby="title"
				onClick={this.props.fixation}
			>
				<title id="title">Нажмите, чтобы закрепить вверху списка</title>
				<path d= {this.state.fill}
				/>
			</svg>
			</div>
		)
	}
}

Как можно на onClick повесить вызов функции? нашел только способ через props {this.props.fixation}

Как Можно вызвать из функции fix_it(e), к примеру? (на он клик вешаем {this.fix_it}), а из fix_it уже вызываем fixation.

Как можно передать state компонента в store?

компонент в котором fixation и куда нужно обращаться

export let IconStarController = connect(
	state => ({
	        fix : state.controlR.fix,
	    }),
	    dispatch => bindActionCreators({
	    	fixation(){
	    		return function(dispatch, getState){
	    			let state = store.getState();
	    			if (state.controlR.fix === false) {
	    				console.log("таки no!")
	    				dispatch({
						      type : 'FIX_IT',
						      fix : true, 
						   })	
	    			}
	    			else if (state.controlR.fix === true) {
	    				console.log("таки Yes!")
	    				dispatch({
						      type : 'FIX_IT',
						      fix : false, 
						   })
	    			}   		
	    		}	
	    	},
	    }, dispatch)
	)(IconStar)

почему у меня при таком объявлении значение fix получается props? storage8.static.itmages.com/i/17/0216/h_1487254091...

как сделать state ?

Answer 1

[Islam Ibakaev]

надеюсь, я ничего не упустил

export class IconStar extends React.Component{
  constructor(props) {
    super(props);
		
    this.state = {
        fill: svgicons.starIcon.deactiv,
        className: 'transparent'
    }
		
     this.fix_it = this.fix_it.bind(this);
   }
	
   fix_it(e){
     const { fix, actions } = this.props;

     this.setState({
	fill: fix ? svgicons.starIcon.deactiv : svgicons.starIcon.active,
	className: this.state.class === "transparent" ? "show" : "transparent";
     });

      actions.fixation();
  }
	
  render(){
    const { className, fill } = this.state;
		
    return(
      <div>
        <svg 
	  className={`star_icon ${className}`}
	  aria-labelledby="title"
	  onClick={this.fix_it}
	>
	<title id="title">Нажмите, чтобы закрепить вверху списка</title>
	<path d={fill} />
      </svg>
     </div>
    )
 }
}

function fixation(){
    return (dispatch, getState) => {
      let state = getState();
      
      if (!state.controlR.fix) {
        dispatch({ type : 'FIX_IT', fix : true });
      }
      else {
        dispatch({ type : 'FIX_IT', fix : false });
      }   		
    };	
  }

const actionCreators = { fixation: fixation };

export default connect(
  state => ({ fix : state.controlR.fix }),
  dispatch => { actions: bindActionCreators(actionCreators, dispatch) }
)(IconStar);

Comments

[Islam Ibakaev]

такова концепция паттерна flux: данные передаются от родительского компонента вниз дочернему через props.
в данном случае, ты получаешь данные не сверху от родителя, но из хранилища.
откуда бы не получал данные: от родителя либо из хранилища, они в любом случае попадают в объект props.

[vaskadogana]

Islam Ibakaev: возвращает
mapDispatchToProps() in Connect(IconStar) must return a plain object. Instead received undefined.

[vaskadogana]

Islam Ibakaev: и отрабатывает до вызова функции fixation:
Cannot read property 'fixation' of undefined

[Islam Ibakaev]

ты установил redux-thunk, react-redux? покажи файл компонента

[vaskadogana]

Islam Ibakaev: спасибо!, разобрался.

[vaskadogana]

vaskadogana: функцию нужно вызывать actionCreators.fixation()

[Islam Ibakaev]

vaskadogana: если не передавать в bindActionCreators, тогда в коде пишется this.props.dispatch(actionCreators.fixation())

[vaskadogana]

Islam Ibakaev: заметил, что если делать этим способом. То функции в connect нету. Пропс автоматом не обновляется( Как если бы через onClick() )

Answer 2

[vaskadogana]

может еще какие нибудь варианты есть? Как то много лишних телодвижений.
При таком раскладе как описал Islam Ibakaev: сам класс с которого обращаемся в connect не подписывается на эти обновления. Все равно приходится писать controller и использовать уже его.