React Redux connect() с Redux thunk

Question

У меня проблема при использовании Redux thunk с методом connect() от react-redux. У меня есть следующий код:

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

Когда я визуализация Container компонента и нажмите на кнопку, только «# 1» который отображаются в консоли. Таким образом, «thunk» не выполняется.

Когда я явно отправка actionCreator(), он делает работу:

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

The Redux docs says this about mapDispatchToProps:

Если объект будет принят, будет предполагаться, каждая функция внутри него, чтобы быть действие создатель Redux

Так почему же mapDispatchToProps не dispatch() мой actionCreator()? Я новичок в React, так что, может быть, я не понимаю это правильно?

Update

При использовании bindActionCreators() из перевождь он делает работу:

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

Является ли это правильный способ связать actioncreators с connect()?

Answer 1

В вашем mapDispatchToProps вы переопределяете функцию dispatch, сделав ее аргументом функции. Поскольку вы делаете dispatch => {function}, отправка внутри функции теперь относится к аргументу, который вы передаете функции, но вы не передаете ему никаких аргументов.

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

Изменить его к этому, и он должен работать:

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

Таким образом, когда вы звоните callback(), то dispatch относится к пройденному dispatch функции по mapDispatchToProps, и действие получает посланным.

Answer 2

Это потому, что функция actionCreator возвращает новую функцию при ее вызове. Удалите return в actionCreator, чтобы он работал.