Redux-thunk 调度不工作
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/ , and a couple gists with sample code for binding and dispatching at https://gist.github.com/markerikson/6c7608eee5d2421966d3df5edbb8f05c and https://gist.github.com/markerikson/f46688603e3842af0f9720dea05b1a9e 讨论了动作创建器的使用和绑定。
如果您不想使用连接功能,那么您可以使用 useDispatch() 钩子。
const dispatch = useDispatch();
useEffect(() => {
dispatch(addUser())
}, [])
您可以使用 componentDidMount 或 UseEffect 来获取数据。
我正在查看 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/ , and a couple gists with sample code for binding and dispatching at https://gist.github.com/markerikson/6c7608eee5d2421966d3df5edbb8f05c and https://gist.github.com/markerikson/f46688603e3842af0f9720dea05b1a9e 讨论了动作创建器的使用和绑定。
如果您不想使用连接功能,那么您可以使用 useDispatch() 钩子。
const dispatch = useDispatch();
useEffect(() => {
dispatch(addUser())
}, [])
您可以使用 componentDidMount 或 UseEffect 来获取数据。