时间戳

首页 > 解决方案 > 在 Redux 中将道具传递给动作创建者

javascript - 在 Redux 中将道具传递给动作创建者

问题描述

我正在尝试将 ID 号（作为道具）传递到onClick事件的动作创建函数中。我之前在使用时使用过这种语法，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,
}
);

标签： javascriptreactjsreduxactionreact-props

解决方案

您应该将 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)}

有趣的事实：您可能不需要 mapDispatchToProps 函数

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

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

并且由于 的​​函数签名addCard已经采用了 id

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

那么您的onClick代码仍将按预期工作。

推荐阅读