Come funziona connect without mapDispatchToProps

Stavo leggendo i documenti di esempio per la redux e ho trovato questo esempio di un componente contenitore. Qualcuno può spiegare perché in questo caso mapDispatchToProps non è necessario qui. Inoltre, come funziona la funzione di invio?

import React from 'react' import { connect } from 'react-redux' import { addTodo } from '../actions' let AddTodo = ({ dispatch }) => { let input return ( 
{ e.preventDefault() if (!input.value.trim()) { return } dispatch(addTodo(input.value)) input.value = '' }}> { input = node }} />
) } AddTodo = connect()(AddTodo) export default AddTodo

connect()(AddTodo) passerà la dispatch come prop to AddTodo componente prop to AddTodo , che è comunque utile anche senza azioni di stato o predefinite. Questo è il motivo per cui mapDispatchToProps non è necessario nel tuo codice

Ora nel tuo componente let AddTodo = ({ dispatch }) => { stai distruggendo i tuoi oggetti di scena per accedere solo alla dispatch .

Se fai uso di mapDispatchToProps , addTodo tua azione addTodo disponibile come elemento prop al tuo componente e poi la chiamerai come this.props.addTodo . Quindi l’approccio sopra è un’alternativa. Dipende da te scegliere cosa ti senti a tuo agio

connect solo passa store / dispatch tramite il contesto React in modo da non dover passare il negozio attraverso molti componenti. Non è necessario utilizzare la connessione però. Qualsiasi modello di modulo / HOC potrebbe funzionare, connettersi è una cosa comoda da usare.

L’uso del dispatch nel componente o l’uso di mapDispatchToProps sono la stessa cosa.

Tuttavia, l’utilizzo di mapDispatchToProps ti offre molta più flessibilità nella strutturazione del codice e nella mapDispatchToProps tutti i creatori di azioni in un unico posto.

Secondo i documenti :

[mapDispatchToProps (dispatch, [ownProps]): dispatchProps] (Object o Function):

Se viene passato un object , si presume che ogni funzione al suo interno sia un creatore di azioni Redux. Un object con gli stessi nomi di funzione, ma con ogni creatore di azioni racchiuso in una chiamata di dispatch in modo che possano essere invocati direttamente, verrà unito agli oggetti del componente.

Se una funzione viene passata, verrà inviata come primo parametro. Spetta a te restituire un object che in qualche modo utilizza la spedizione per vincolare i creatori di azioni a modo tuo. (Suggerimento: puoi usare l’ bindActionCreators() da Redux.)

Se la funzione mapDispatchToProps è dichiarata come se mapDispatchToProps due parametri, verrà chiamata con dispatch come primo parametro e gli oggetti passati al componente connesso come secondo parametro, e verrà richiamata ogni volta che il componente connesso riceve nuovi oggetti di scena. (Il secondo parametro viene normalmente chiamato ownProps per convenzione.)

Se non si fornisce la propria funzione mapDispatchToProps o l’object pieno di creatori di azioni, l’implementazione predefinita mapDispatchToProps solo la distribuzione negli oggetti di scena del componente.

Le persone tendono a scrivere react in due modi. Uno è l’approccio basato sulla class che normalmente incontreresti. In pratica utilizza le classi.

 class App extends Component{ constructor(){ super(); this.state={} } render(){ return( // ); } } 

e altro è l’ functional approach .

 const App = (props) => {​ return( 

{{props.name}}

) }
const App = (props) => {​ return(

{{props.name}}

) }

Quindi, nell’approccio funzionale è ansible passare i dati come arguments ai componenti. Quindi, se hai passato la dispatch dal componente principale a questo componente in props di props . Puoi accedervi usando props.dispatch .