Reagire Redux connect() con Redux thunk

Question

Ho un problema quando si utilizza Redux thunk con il metodo connect() da react-redux. Ho il seguente codice:

function Component(props) { 
    return (
     <button onClick={props.callback}>Click here</button> 
    ); 
} 

function actionCreator() { 
    console.log('#1'); 
    return dispatch => console.log('#2'); // = thunk 
} 

const mapDispatchToProps = dispatch => ({ 
    callback: actionCreator 
}); 
export const Container = connect(null, mapDispatchToProps)(Component); 

Quando mi rendo componente Container e cliccare sul pulsante, solo '# 1' viene visualizzato nella console. Quindi il 'thunk' non viene eseguito.

Quando la spedizione in modo esplicito actionCreator(), funziona:

const mapDispatchToProps = dispatch => ({ 
    callback: dispatch => dispatch(actionCreator()) 
}); 

The Redux docs says this about mapDispatchToProps:

Se viene passato un oggetto, ogni funzione all'interno di esso sarà assunto come un'azione creatore Redux

Quindi perché mapDispatchToProps non dispatch() my actionCreator()? Sono nuovo di React, quindi forse non lo capisco bene?

Aggiornamento

Quando si utilizza bindActionCreators() da redux funziona:

const mapDispatchToProps = dispatch => { 
    return bindActionCreators({ 
     callback: actionCreator 
    }, dispatch); 
}; 

E 'questo il modo corretto di legarsi actioncreators con connect()?

Answer 1

Nel tuo mapDispatchToProps, stai ignorando la funzione dispatch rendendola un argomento della funzione. Poiché si sta eseguendo lo dispatch => {function}, l'invio all'interno della funzione fa ora riferimento all'argomento passato alla funzione, ma non viene passato alcun argomento.

callback: dispatch => dispatch(actionCreator()) 
      //^overrides^

Change a questo, e dovrebbe funzionare:

const mapDispatchToProps = dispatch => ({ 
    callback:() => dispatch(actionCreator()) 
}); 

In questo modo, quando si chiama callback(), il dispatch si riferisce alla funzione passata dispatch da mapDispatchToProps, e l'azione diventa spediti.

Answer 2

È perché la funzione actionCreator restituisce una nuova funzione quando viene chiamata. Rimuovere il return in actionCreator lo farà funzionare.