将道具传递给 Redux 中的动作创建者
Passing a prop into an action creator in Redux
我正在尝试将 ID 号(作为道具)传递到 onClick
事件中的动作创建器函数中。我以前在使用 setState()
时使用过这种语法,但它似乎在这里不起作用。我是 redux 的新手,在文档中找不到答案。我 console.logged 确认所有必要的道具都被适当地传递。
当我在我的 reducer 函数中 console.log(action.payload)
时,它 returns 为 undefined
。如果您希望我 post 更多代码,我可以。
我担心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,
}
);
您应该将 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 会在对 dispatch
的调用中自动将操作包装在 mapDispatchToProps
中,因此您可以编写如下所示的 mapDispatchToProps
[=22] =]
const mapDispatchToProps = {
addMarket: actions.addMarket,
addCard: actions.addCard
};
并且由于 addCard
的函数签名已经采用了 id
export const addCard = (marketId) => ({
type: types.ADD_CARD,
payload: marketId,
});
那么您的 onClick
代码仍将按预期工作。
我正在尝试将 ID 号(作为道具)传递到 onClick
事件中的动作创建器函数中。我以前在使用 setState()
时使用过这种语法,但它似乎在这里不起作用。我是 redux 的新手,在文档中找不到答案。我 console.logged 确认所有必要的道具都被适当地传递。
当我在我的 reducer 函数中 console.log(action.payload)
时,它 returns 为 undefined
。如果您希望我 post 更多代码,我可以。
我担心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,
}
);
您应该将 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 会在对 dispatch
的调用中自动将操作包装在 mapDispatchToProps
中,因此您可以编写如下所示的 mapDispatchToProps
[=22] =]
const mapDispatchToProps = {
addMarket: actions.addMarket,
addCard: actions.addCard
};
并且由于 addCard
的函数签名已经采用了 id
export const addCard = (marketId) => ({
type: types.ADD_CARD,
payload: marketId,
});
那么您的 onClick
代码仍将按预期工作。