mapDispatchToProps和matchDispatchToProps有什麼區別

標題解釋了這些問題。mapDispatchToProps和matchDispatchToProps有什麼區別

我正在使用redux將用戶狀態更改爲活動用戶或非活動用戶。

在matchDispatchToProps：

function matchDispatchToProps(dispatch){ 
    return bindActionCreators({selectUser: selectUser}, dispatch); 
}

在mapDispatchToProps的情況下：

const mapDispatchToProps = (dispatch) => ({ 
    dispatch({selectUser: selectUser}) 
})

請解釋它們之間的差異。

來源

2017-07-27 subhajit

你是什麼意思的差異？這兩種情況導致同樣的事情... – Ale

所以應該有一些差異來創建兩種方式。取決於情況的一些好處和缺點。 – subhajit

@subhajit你瞭解Javascript中的函數和箭頭函數的區別嗎？如果你不這樣做，那麼在提出這樣一個廣泛的問題之前，你真的應該閱讀基本的ES6 Javascript。請參閱[我如何提出一個好問題？]（https://stackoverflow.com/help/how-to-ask） –

這裏有兩件事。

首先，將connect()的第二個參數的正確名稱稱爲mapDispatchToProps。它也經常被稱爲mapDispatch。但是，像在JS任何函數調用，它什麼並不重要你通話您變量 - 你可以打電話給你的功能mapDispatchToProps，mapDispatch，fred，或someFunctionName。（這就是說，我不知道你爲什麼叫它matchDispatchToProps，或者你聽說過這個名字。）

其次，你的兩個例子的功能有很大的不同。 mapDispatch函數的意圖是返回一個對象，並且該對象中的每個鍵/值都將成爲該組件的道具。通常情況下，您會返回該對象內部的綁定動作創建者函數，以便該組件可以接收像this.props.doSomeWork()這樣的道具。你的第一個例子，return bindActionCreators({selectUser}, dispatch)，會正確地做到這一點。

你的第二個例子並不似乎是有效的JS語法：

const mapDispatchToProps = (dispatch) => ({ 
    dispatch({selectUser: selectUser}) 
})

我們有一個箭頭函數立即返回一個對象，但不是在對象申報鍵/值對，它看起來就像它試圖立即致電dispatch。這根本無效。

來源

2017-07-27 16:14:32 markerikson

matchDispatchToProps不是react-redux中的標準參考。我會給你一個關於connect HoC如何工作的概述。

connect HoC需要四個參數; mapStateToProps，mapDispatchToProps,mergeProps和options。在mapStateToProps分配你想在你的商店什麼樣的信息是可用的組件內部如下：

mapStateToProps = (state) => ({ 
    user: state.user 
});

在mapDispatchToProps您提供的功能道具，你的組件可以訪問您的商店的dispatch方法如下：

mapDispatchToProps = (dispatch) => ({ 
    updateUser: (user) => { 
     dispatch(updateUser(user)); 
    } 
});

注意：updateUser是你做了一個actionCreater。

你會再與connect HOC使用它們如下：

MyConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);

現在你可以使用<MyConnectedComponent />和的<MyComponent />代碼中，你可以訪問({ user, updateUser })屬性。

注意：connect可以採取null參數爲好。 connect()(Component)將使dispatch作爲道具在您的組件中可用。這是沒有任何參數的默認設置。您也可以connect(null, mapDispatchToProps)(Component)在組件中製作updateUser作爲道具，而不必將組件連接到商店。如果您想要從商店中訪問user，您也可以connect(mapStateToProps)(Component)，但不需要從組件內派發。

附加信息

[mergeProps（stateProps，dispatchProps，ownProps）：道具]（功能）：

如果指定，它被傳遞的mapStateToProps（），mapDispatchToProps結果（）和父項道具。您從它返回的普通對象將作爲道具傳遞給包裝組件。你可以指定這個函數來根據道具選擇一個狀態片段，或者將動作創建者綁定到道具上的特定變量。如果省略，則默認使用Object.assign（{}，ownProps，stateProps，dispatchProps）。

[選項（對象）

如果指定，進一步定製連接器的行爲。除了可通過到connectAdvanced()的選項（見下文的那些），連接（）接受這些附加選項：

[純]（布爾值）：如果爲真，連接（）將避免重新呈現和如果相關的狀態/道具對象基於它們各自的相等性檢查保持相等，則調用mapStateToProps，mapDispatchToProps和mergeProps。假定包裝組件是一個「純粹」組件，並且不依賴於除道具和所選Redux商店狀態以外的任何輸入或狀態。默認值：true
[areStatesEqual]（功能）：純粹時，將傳入存儲狀態與其以前的值進行比較。默認值：strictEqual（===）
[areOwnPropsEqual]（功能）：純淨時，將傳入的道具與先前的值進行比較。默認值：shallowEqual
[areStatePropsEqual]（功能）：純粹時，將mapStateToProps的結果與其以前的值進行比較。默認值：shallowEqual
[areMergedPropsEqual]（功能）：純粹時，將mergeProps的結果與其先前的值進行比較。默認值：shallowEqual
[storeKey]（String）：從哪裏讀取商店的上下文的關鍵字。如果您處於擁有多個商店的不可取的位置，您可能只需要這些。默認值：'store'

完整說明可在reactjs/react-redux找到。

來源

2017-07-27 16:24:08

mapDispatchToProps和matchDispatchToProps有什麼區別

回答

相關問題