Sento che nessuna delle risposte ha chiarito il motivo per cui mapDispatchToProps
è utile.
A questo si può veramente rispondere solo nel contesto del container-component
modello, che ho trovato meglio compreso dalla prima lettura: Componenti del contenitore e Uso con React .
In poche parole, components
dovresti preoccuparti solo di mostrare cose. L' unico posto in cui dovrebbero ottenere informazioni sono i loro oggetti di scena .
Separato da "visualizzare elementi" (componenti) è:
- come ottieni le cose da mostrare,
- e come gestisci gli eventi.
Questo è ciò che serve containers
.
Pertanto, un "ben progettato" component
nel modello è simile al seguente:
class FancyAlerter extends Component {
sendAlert = () => {
this.props.sendTheAlert()
}
render() {
<div>
<h1>Today's Fancy Alert is {this.props.fancyInfo}</h1>
<Button onClick={sendAlert}/>
</div>
}
}
Vedere come questo componente ottiene informazioni visualizza da oggetti di scena (che è venuto dal negozio redux via mapStateToProps
) e si ottiene anche la sua funzione di azione dai suoi oggetti di scena: sendTheAlert()
.
Ecco dove mapDispatchToProps
entra: nel corrispondentecontainer
// FancyButtonContainer.js
function mapDispatchToProps(dispatch) {
return({
sendTheAlert: () => {dispatch(ALERT_ACTION)}
})
}
function mapStateToProps(state) {
return({fancyInfo: "Fancy this:" + state.currentFunnyString})
}
export const FancyButtonContainer = connect(
mapStateToProps, mapDispatchToProps)(
FancyAlerter
)
Mi chiedo se riesci a vedere, ora che è l' container
1 a sapere di redux e spedizione, archiviazione, stato e ... roba.
Il component
modello in, FancyAlerter
che fa il rendering, non ha bisogno di sapere nulla di tutto ciò: ottiene il suo metodo per chiamare onClick
dal pulsante, tramite i suoi oggetti di scena.
E ... è mapDispatchToProps
stato l'utile mezzo che il redux fornisce per consentire al contenitore di passare facilmente quella funzione nel componente avvolto sui suoi puntelli.
Tutto questo sembra molto simile al todo esempio nei documenti, e un'altra risposta qui, ma ho provato a lanciarlo alla luce del modello per enfatizzare il perché .
(Nota: non è possibile utilizzare mapStateToProps
per lo stesso scopo mapDispatchToProps
del motivo di base per cui non si ha accesso dispatch
all'interno mapStateToProp
. Quindi non è possibile utilizzare mapStateToProps
per assegnare al componente spostato un metodo che utilizza dispatch
.
Non so perché abbiano scelto di suddividerlo in due funzioni di mappatura: sarebbe stato più ordinato avere mapToProps(state, dispatch, props)
IE una funzione per fare entrambe le cose!
1 Nota che ho deliberatamente chiamato il contenitore in modo esplicito FancyButtonContainer
, per evidenziare che si tratta di una "cosa" - l'identità (e quindi l'esistenza!) Del contenitore come "una cosa" a volte si perde nella scorciatoia
export default connect(...)
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
sintassi mostrata nella maggior parte degli esempi