React Redux連接（）與Redux thunk

從react-redux使用Redux thunk與connect()方法時遇到問題。我有以下代碼：React Redux連接（）與Redux thunk

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：

如果一個對象傳遞，它裏面的每個功能將被假定爲一個終極版行動的創建者

那麼爲什麼mapDispatchToProps不是dispatch()我的actionCreator()？我對React很陌生，所以也許我不明白它的意思嗎？

更新

當使用bindActionCreators()從終極版，它的工作：

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

這是與connect()結合actioncreators正確的方法是什麼？

來源

2016-02-29 Jan-Paul Kleemans

在您的mapDispatchToProps中，通過將函數作爲參數來覆蓋dispatch函數。因爲你在做dispatch => {function}，所以函數內部的調度現在指的是你傳遞給函數的參數 - 但是你不會傳遞任何參數給它。

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

改成這樣，它應該工作：

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

這樣一來，當你調用callback()，則dispatch指通過dispatch功能由mapDispatchToProps，且動作被分派。

來源

2016-02-29 17:36:17 mxstbr

感謝您的回答。我已經將redux-thunk作爲中間件加入了我的商店。你的代碼不起作用。它在組件裝入時直接分派actionCreator。當我然後單擊按鈕我得到錯誤「this.props.callback不是一個函數」 –

你是對的，我現在發現真正的問題。改變'mapDispatchToProps'函數爲 'const mapDispatchToProps = dispatch =>（{callback：（）=> dispatch（actionCreator（））}）;' 它應該可以工作。我已經編輯了我的答案，以反映並解釋爲什麼這是必要的！ – mxstbr

再次感謝。問題在於'callback：dispatch => dispatch（actionCreator（））'確實有效。但是，傳遞給'callback（）'（從組件）的params不會被傳入'actionCreator（）'中。我發現'bindActionCreators（）'現在工作。 –

這是因爲您的actionCreator函數在被調用時會返回一個新函數。刪除actionCreator中的return將使其工作。

來源

2016-02-29 21:53:57 geniuscarrier

感謝您的回答。它不起作用。是不是以定義thunk的方式返回函數？ –

@ Jan-PaulKleemans你能提供一個jsfiddle嗎？所以我可以幫你。 – geniuscarrier

我發現bindActionCreators（）現在可以工作。謝謝你的幫助。 –

React Redux連接（）與Redux thunk

回答

相關問題