React Redux connect() với Redux thunk

Question

Tôi gặp vấn đề khi sử dụng phương tiện Redux với phương pháp connect() từ react-redux. Tôi có mã sau:

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

Khi tôi hiển thị thành phần Container và nhấp vào nút, chỉ '# 1' đang được hiển thị trong bảng điều khiển. Vì vậy, 'thunk' không được thực hiện.

Khi tôi dứt khoát cử actionCreator(), nó làm việc:

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

The Redux docs says this about mapDispatchToProps:

Nếu một đối tượng được thông qua, mỗi chức năng bên trong nó sẽ được giả định là một người sáng tạo hành động Redux

Vậy tại sao mapDispatchToProps không dispatch() sốcủa tôi? Tôi mới sử dụng React, vì vậy có lẽ tôi không hiểu nó đúng không?

Cập nhật

Khi sử dụng bindActionCreators() từ Redux nó không làm việc:

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

Đây có phải là cách chính xác để ràng buộc actioncreators với connect()?

Answer 1

Trong số mapDispatchToProps, bạn đang ghi đè hàm dispatch bằng cách đặt nó làm đối số của hàm. Bởi vì bạn đang thực hiện các dispatch => {function}, công văn bên trong hàm bây giờ đề cập đến đối số bạn chuyển đến hàm - nhưng bạn không chuyển bất kỳ đối số nào cho hàm đó.

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

Thay đổi nó với điều này, và nó sẽ làm việc:

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

Bằng cách đó, khi bạn gọi callback(), các dispatch đề cập đến thông qua dispatch chức năng bởi mapDispatchToProps, và hành động được gửi đi.

Answer 2

Đó là vì hàm actionCreator của bạn trả về một hàm mới khi được gọi. Xóa return trong actionCreator sẽ làm cho nó hoạt động.