javascript - React Redux connect() dengan Redux thunk

Saya mempunyai masalah ketika menggunakan Redux thunk dengan kaedah connect() dari react-redux. Saya mempunyai kod berikut:

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);

Apabila saya memaparkan komponen Container dan menekan butang, hanya '#1' yang dipaparkan dalam konsol. Jadi 'thunk' tidak dijalankan.

Apabila saya secara jelas menghantar actionCreator(), ia berfungsi:

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

Dokumen Redux menyatakan perkara ini tentang mapDispatchToProps:

Jika sebuah objek diberikan, setiap fungsi di dalamnya akan dianggap sebagai pencipta tindakan Redux

Jadi mengapa mapDispatchToProps tidak dispatch() actionCreator() saya? Saya baru dalam React, jadi mungkin saya tidak memahaminya dengan betul?

Kemas kini

Apabila menggunakan bindActionCreators() daripada redux ia berfungsi:

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

Adakah ini cara yang betul untuk mengikat actioncreators dengan connect()?

Jawapan #1

Dalam mapDispatchToProps anda, anda menimpa fungsi dispatch dengan menjadikannya argumen bagi fungsi tersebut. Kerana anda melakukan dispatch => {fungsi}, dispatch di dalam fungsi kini merujuk kepada argumen yang anda berikan kepada fungsi itu - tetapi anda tidak memberikan sebarang argumen kepadanya.

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

Tukar ia kepada ini, dan ia sepatutnya berfungsi:

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

Dengan cara itu, apabila anda memanggil callback(), dispatch merujuk kepada fungsi dispatch yang dihantar oleh mapDispatchToProps, dan tindakan itu dihantar.

Jawapan #2

Ini kerana fungsi actionCreator anda mengembalikan fungsi baru apabila ia dipanggil. Buang return dalam actionCreator akan menjadikannya berfungsi.