陣營終極版mapDispatchToProps VS this.props.dispatch

直到現在我用我的容器和組件的操作是這樣的：陣營終極版mapDispatchToProps VS this.props.dispatch

<Header btnMnuAction={this.props.toggleSidebar} logout={this.props.logout}/>

隨着mapDispatchToProps功能：

const mapDispatchToProps = (dispatch) => { 
    return { 
     toggleSidebar:() => { 
      dispatch(toggleSidebar()); 
     }, 
     logout:() => { 
      dispatch(logout()); 
     } 
    } 
};

現在，我嘗試了這種方式：

<Header btnMnuAction={() => this.props.dispatch(toggleSidebar())} logout={() => this.props.dispatch(logout())} >

請問有人可以向我解釋這些選項之間的區別嗎？

謝謝:)

來源

2017-05-16 user3712353

實際上，沒有顯着差異。唯一不同的是我能想到的是，第一種方法在每次調用render方法時創建一個新的內聯函數。除此之外，這些都是做同樣事情的不同方式。

mapDispatchToProps還有另一種較少的編碼和更乾淨的方法。如果您只是在mapDispatchToProps的調度調用中調用一個函數，則可以將它們全部避免並直接將對象中的方法作爲connect方法的第二個參數傳遞。

connect(mapStateToProps, {toggleSidebar, logout})(Component)

來源

2017-05-16 08:35:02

當您使用從reduxconnect和利用mapDispatchToProps，由mapDispatchToProps返回的功能可作爲道具，例如，在第一種情況下

const mapDispatchToProps = (dispatch) => { 
    return { 
     toggleSidebar:() => { 
      dispatch(toggleSidebar()); 
     }, 
     logout:() => { 
      dispatch(logout()); 
     } 
    } 
};

從道具，你將有機會獲得到toggleSidebar和logout，它們在內部具有在其上定義的分派。

在第二種情況下，如果你沒有第二個參數傳遞給connect，它在默認情況下，使提供的dispatch給你，然後你可以調用使用dispatch

作用所以這只是兩種不同的方式以達到相同的結果，並在內部做同樣的事情。

來源

2017-05-16 08:35:20

mapDispatchToProps的基本角色正是您在示例中內聯的內容，但它更靈活，因爲它不僅可以接受調度程序，還可以接受目標組件的狀態和自己的道具。

您可以使用這些額外的參數基於組件的狀態改變行爲（例如，如果它是disabled，那麼你可能會返回任何限制的行動）或道具（例如，如果在組件，通自己的道具cleanStorage它沿着logout行動）。

使用mapDispatchToProps可以使代碼更清晰，更好地分離。想象一下，通過10個以上的操作並手動綁定它們...消費者組件應該只接受定義的操作，而不是通用的dispatch，因此，它減少了與Redux的耦合，並允許更輕鬆的維護和測試。

通過使用一些高級功能，您可以定義簡單的功能bind，在那裏你只需派遣函數綁定到行動創造者，比如像這樣：

const bind => actions => dispatch => 
    Object.entries(actions) 
    .map(([key, action]) => [key, (...args) => dispatch(action(...args)]) 
    .reduce((acc, ([key, boundAction]) => ({...acc, [key]: boundAction}), {}) 

connect(mapStateToProps, bind({ toggleSidebar, logout }), ...)(Component)

或者只是使用bindActionCreators(actionCreators, dispatch)減少樣板：

import { bindActionCreators } from 'redux'; 

connect(
    mapStateToProps, 
    dispatch => bindActionCreators({ toggleSidebar, logout }, dispatch), 
    ... 
)(Component)

來源

2017-05-16 08:39:24

陣營終極版mapDispatchToProps VS this.props.dispatch

回答

相關問題