Отправьте prop как аргумент для хранения из React Redux Container

Question

Я хочу отправить в свой магазин полезную нагрузку компонента из события щелчка субкомпонента:

const Aircraft = ({ ident, type, base, handleOnClick }) => (
    <div className="item" onClick={handleOnClick}>
        <i className="large plane middle aligned icon"></i>
        <div className="content">
            <div className="header">{ident}</div>
            <div className="description">{type}</div>
            <div className="description">{base}</div>
        </div>
    </div>
);

Поэтому я хочу отправить ident в handleOnClick.

Событие click передается как реквизит родительского компонента и сопоставляется с контейнером-избыточностью.

const AircraftList = ({ aircraftList, setCurrentAircraft }) => (
    <div className="ui relaxed celled list">
        {aircraftList.map((el, index) => (
            <Aircraft key={index} {...el} handleOnClick={setCurrentAircraft} />
        ))}
    </div>
);

Redux-контейнер:

import { connect } from 'react-redux';
import AircraftList from '../../components/AircraftList/AircraftList';
import { setCurrentAircraft } from '../../actions/actions';

const mapStateToProps = state => {
  return {
    aircraftList: state.aircraft,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    setCurrentAircraft: (e) => {
      dispatch(setCurrentAircraft(ident));
    }
  };
};

const AircraftListContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(AircraftList);

export default AircraftListContainer;

Я не уверен, как пройтиидентификатор из субкомпонента для отправки и последующего обновления магазина?

Answer 1

Если вам нужен объект event внутри setCurrentAircraft, добавьте ident в качестве второго аргумента, в противном случае оставьте ident в качестве единственного аргумента.

const mapDispatchToProps = (dispatch) => {
  return {
    setCurrentAircraft: (e, ident) => { // If `event` needed, else `(ident)`
      dispatch(setCurrentAircraft(ident));
    }
  };
};

Затем оберните handleOnClick в Aircraft внутри другой функции, чтобы указать в качестве аргумента ident.

const Aircraft = ({ ident, type, base, handleOnClick }) => (
    <div className="item" onClick={(e) => handleOnClick(e, ident)}> // or just handleOnClick(ident)
        {/* ... */}
    </div>
);

Answer 2

Попробуй это. Вам нужно привязать свой обработчик кликов и отправить из него действие. Вам также необходимо назначить значение идентификатора где-нибудь в вашем дочернем компоненте, чтобы вы могли получить к нему доступ.

Redux Контейнер

import { connect } from 'react-redux';
import AircraftList from '../../components/AircraftList/AircraftList';
import { setCurrentAircraft } from '../../actions/actions';
class AircraftListContainer extends React.Component {
constructor(props) {
super(props)
}
handleClick = (e) => {
const ident = e.currentTarget.getAttribute("data-ident")
this.props.setCurrentAircraft(ident)
}
render () {
return (<AircraftList aircraftlist={this.props.aircraftlist} handleClick= 
{this.handleClick} />)
  }
}
 const mapStateToProps = state => {
  return {
    aircraftList: state.aircraft,
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
    setCurrentAircraft: (ident) => {
      dispatch(setCurrentAircraft(ident));
    }
  };
};

export default connect(mapStateToProps, 
mapDispatchToProps)(AircraftListContainer);

AircraftList

const AircraftList = ({ aircraftList, handleClick }) => (
    <div className="ui relaxed celled list">
        {aircraftList.map((el, index) => (
            <Aircraft key={index} {...el} handleOnClick={handleClick} />
        ))}
    </div>
);

Самолеты

const Aircraft = ({ ident, type, base, handleOnClick }) => (
    <div className="item" onClick={handleOnClick} data-ident={ident}>
        <i className="large plane middle aligned icon"></i>
        <div className="content">
            <div className="header">{ident}</div>
            <div className="description">{type}</div>
            <div className="description">{base}</div>
        </div>
    </div>
);