将道具传递给Redux中的动作创建者

Question

我正在尝试将onClick事件上的ID号（作为道具）传递给我的动作创建者函数。在使用setState()之前，我曾使用过这种语法，但在这里似乎无法使用。我是redux的新手，但未在文档中找到答案。我已用console.logged确认所有必要的道具都已正确传递。

当我在化简函数中console.log(action.payload)时，它返回为undefined。如果您希望我发布更多代码，可以。

我担心addCard

const mapDispatchToProps = dispatch => ({
  addMarket: () => dispatch(actions.addMarket()),
  addCard: () => dispatch(actions.addCard())
});

具有onClick

的组件

const MarketDisplay = (props) => (
  <div className="marketBox">
    <h3>{props.totalMarkets}</h3>
    <h3>Market ID:</h3> <p>Market</p>
    <h3>Location:</h3> <p>Location</p>
    <h3>Cards:</h3> <p>Cards</p>
    <h3>% of total:</h3> <p>% of total</p>
    <button onClick={() => props.addCard(props.id)}>Add Card</button>
  </div>
);

动作对象

import * as types from '../constants/actionTypes'

export const addCard = (marketId) => ({
  type: types.ADD_CARD,
  payload: marketId,
}
);

Answer 1

您应将ID转发（或代理）给动作创建者

const mapDispatchToProps = dispatch => ({
  addMarket: () => dispatch(actions.addMarket()),
  addCard: (id) => dispatch(actions.addCard(id)) // <-- pass id to action creator
});

UI，现在可以通过props.id。

onClick={() => props.addCard(props.id)}

趣闻：You Might Not Need The mapDispatchToProps Function

redux connect HOC将在对mapDispatchToProps的调用中自动将动作包装在dispatch中，因此您可以编写如下所示的mapDispatchToProps

const mapDispatchToProps = {
  addMarket: actions.addMarket,
  addCard: actions.addCard
};

并且由于addCard的功能签名已经带有ID

export const addCard = (marketId) => ({
  type: types.ADD_CARD,
  payload: marketId,
});

然后您的onClick代码仍将按预期工作。