[英]Redux-thunk dispatch not working
我正在查看 thunk 並試圖弄清楚如何實現 api 調用。 它不起作用,所以我已經回到了最基礎的地方。 當我點擊按鈕時,它會顯示'Getting here!
在控制台中,但當我console.log(dispatch)
時沒有顯示任何內容。 我在這里錯過了什么嗎?
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { connect, Provider } from 'react-redux';
import thunk from 'redux-thunk'
import axios from 'axis';
const store = createStore(
reducer,
applyMiddleware(thunk)
);
function fetchUser() {
return axios.get('https://randomuser.me/api/');
}
function addUser() {
console.log('Getting here');
return (dispatch) => {
console.log(dispatch) //not showing anything
return fetchUser().then(function(data){
console.log(data);
});
};
}
class App extends React.Component {
addUser() {
addUser();
}
render() {
return (
<button onClick={this.addUser.bind(this)}>+</button>
)
}
}
const mapPropsToState = function(store){
return {
newState: store
}
}
var ConnectApp = connect(mapPropsToState)(App);
ReactDOM.render(
<Provider store={store}>
<ConnectApp />
</Provider>,
document.getElementById('app')
)
您不能從組件中調用addUser()
作為常規函數。 您必須使用mapDispatchToProps
函數並將其傳遞給connect
調用,以便能夠調度addUser()
。
const mapDispatchToProps = dispatch => ({addUser: () => dispatch(addUser())})
然后
ConnectApp = connect(mapPropsToState, mapDispatchToProps)(App);
現在您可以將其稱為道具。
addUser() {
this.props.addUser();
}
你實際上並不是在調度 thunk。 你直接調用它。 您需要將內部() => {}
thunk 函數傳遞給dispatch
。
有幾種方法可以處理這個問題。 由於您沒有為connect
提供mapDispatchToProps
參數,因此App
組件將自動獲得this.props.dispatch()
。 因此,在App.addUser()
,您可以執行this.props.dispatch(addUser())
。
另一種方法是預先綁定addUser
操作創建者。 您可以使用語法var ConnectApp = connect(mapPropsToState, {addUser})(App)
。 然后,當您調用this.props.addUser()
,它會自動分發結果。
我在http://blog.isquaredsoftware.com/2016/10/idiomatic-redux-why-use-action-creators/上有一些關於動作創建者和綁定的使用的討論,以及一些帶有用於綁定和調度的示例代碼的要點在https://gist.github.com/markerikson/6c7608eee5d2421966d3df5edbb8f05c和https://gist.github.com/markerikson/f46688603e3842af0f9720dea05b1a9e 。
如果您不想使用連接函數,那么您可以使用 useDispatch() 鈎子。
const dispatch = useDispatch();
useEffect(() => {
dispatch(addUser())
}, [])
您可以使用 componentDidMount 或 UseEffect 來獲取數據。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.