什么是mapDispatchToProps？我正在閱讀Redux庫的文檔，它有這個例子：除了讀取狀態之外，容器組件還可以調度操作。以類似的方式，您可以定義一個調用的函數mapDispatchToProps()，該函數接收該dispatch()方法并返回您想要注入演示組件的回調道具。這實際上沒有任何意義。mapDispatchToProps你已經擁有了為什么需要mapStateToProps？他們還提供了這個方便的代碼示例：const mapDispatchToProps = (dispatch) => {
return {
onTodoClick: (id) => {
dispatch(toggleTodo(id))
}
}}有人可以用非專業人的術語解釋這個功能是什么以及為什么它有用？
3 回答
拉風的咖菲貓
TA貢獻1995條經驗 獲得超2個贊
我覺得沒有一個答案已經明確為什么mapDispatchToProps有用。
這實際上只能在container-component模式的上下文中得到解答，我在第一次閱讀時發現了最好的理解：容器組件然后使用React。
簡而言之，你components應該只關心展示東西。他們應該從中獲取信息的唯一地方是他們的道具。
與“顯示內容”（組件）分開是：
你如何得到的東西，
以及你如何處理事件。
這是containers為了什么。
因此，模式中的“精心設計” component看起來像這樣：
class FancyAlerter extends Component {
sendAlert = () => {
this.props.sendTheAlert()
}
render() {
<div>
<h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
<Button onClick={sendAlert}/>
</div>
}}看看這個組件如何從props（它來自redux商店mapStateToProps）獲取它顯示的信息，它還從它的props獲取其動作函數：sendTheAlert()。
那是mapDispatchToProps進來的地方：相應的container
// FancyButtonContainer.jsfunction mapDispatchToProps(dispatch) {
return({
sendTheAlert: () => {dispatch(ALERT_ACTION)}
})}function mapStateToProps(state) {
return({fancyInfo: "Fancy this:" + state.currentFunnyString})}export const FancyButtonContainer = connect(
mapStateToProps, mapDispatchToProps)(
FancyAlerter)我不知道你可以看到，現在它的container 1，它知道Redux的調度和存儲以及州和......東西。
該component圖案中，FancyAlerter，這并呈現并不需要了解任何東西：它得到它的方法在調用onClick按鈕，通過它的道具。
并且...... mapDispatchToProps是redux提供的有用手段，讓容器可以輕松地將該函數傳遞到其props上的包裝組件中。
所有這些看起來都非常像文檔中的todo示例，這里有另一個答案，但我試圖根據模式來強制推理它。
（注意：您不能使用mapStateToProps與mapDispatchToProps您無法訪問dispatch內部的基本原因相同的目的mapStateToProp。因此您不能使用mapStateToProps為包裝組件提供使用的方法dispatch。
我不知道為什么他們選擇將它分解為兩個映射函數 - 讓mapToProps(state, dispatch, props) IE一個函數同時執行它們可能更整潔！
1 請注意，我故意明確命名容器FancyButtonContainer，以突出它是一個“東西” - 容器的身份（因此存在?。┳鳛椤耙患隆庇袝r會在速記中丟失
export default connect(...) ????????????
大多數示例中顯示的語法
繁花如伊
TA貢獻2012條經驗 獲得超12個贊
現在假設有一個針對redux的動作：
export function addTodo(text) {
return {
type: ADD_TODO,
text }}當你導入它時，
import {addTodo} from './actions';class Greeting extends React.Component {
handleOnClick = () => {
this.props.onTodoClick(); // This prop acts as key to callback prop for mapDispatchToProps
}
render() {
return <button onClick={this.handleOnClick}>Hello Redux</button>;
}}const mapDispatchToProps = dispatch => {
return {
onTodoClick: () => { // handles onTodoClick prop's call here
dispatch(addTodo())
}
}}export default connect(
null,
mapDispatchToProps)(Greeting);正如函數名稱所示mapDispatchToProps()，將dispatch動作映射到props（我們組件的道具）
因此，道具onTodoClick是一種mapDispatchToProps功能的關鍵，它可以進一步委派派遣行動addTodo。
此外，如果您想修改代碼并繞過手動實現，那么您可以這樣做，
import {addTodo} from './actions';class Greeting extends React.Component {
handleOnClick = () => {
this.props.addTodo();
}
render() {
return <button onClick={this.handleOnClick}>Hello Redux</button>;
}}export default connect(
null,
{addTodo})(Greeting);這究竟意味著什么
const mapDispatchToProps = dispatch => {
return {
addTodo: () => {
dispatch(addTodo())
}
}}添加回答
舉報
0/150
提交
取消