[英]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.