时间戳

首页 > 解决方案 > Dispatch prop 作为参数从 React Redux 容器中存储

javascript - Dispatch prop 作为参数从 React Redux 容器中存储

问题描述

我想从子组件的单击事件中将组件道具作为有效负载分派到我的商店：

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 事件作为 prop 从父组件传递并从 redux 容器映射。

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;

我不确定如何将 ident 从子组件传递给调度并随后更新商店？

标签： javascriptreactjsreduxreact-redux

解决方案

如果您需要将event对象setCurrentAircraft添加ident为第二个参数，否则保留ident作为唯一参数。

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

handleOnClick然后将on包装Aircraft在另一个函数中以将其ident作为参数提供。

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

推荐阅读