mapDispatchToProps未将actionCreators调度到所需组件
mapDispatchToProps未将actionCreators调度到所需组件
提问于 2019-08-13 04:38:03
我正在尝试使用mapDispatchToProps来获得动作，所有动作创建者都在某个组件中，但似乎在某个组件的道具中发生的任何事情都是未定义的，我不知道为什么……我已经检查了我的动作创建者和其他文件，但它们似乎是正确的，我对此非常确定
我已经在这里尝试了我能做的一切，但我可能遗漏了一些小东西，我非常确定它就在我提供的代码中
import React, { Component } from 'react';
import Main from './components/MainComponent';
import { View, Platform } from 'react-native';
import { ConfigureStore } from './redux/configureStore';
import { connect, Provider } from 'react-redux';
import { fetchDishes, fetchPromos, fetchComments, fetchLeaders } from './redux/ActionCreators';
const mapDispatchToProps = (dispatch) => ({
fetchDishes: () => dispatch(fetchDishes()),
fetchComments: () => dispatch(fetchComments()),
fetchPromos: () => dispatch(fetchPromos()),
fetchLeaders: () => dispatch(fetchLeaders()),
});
const store = ConfigureStore();
function App() {
return (
<Provider store = {store}>
<Something />
</Provider>
);
}
class Something extends Component {
componentDidMount() {
this.props.fetchDishes();
this.props.fetchComments();
this.props.fetchPromos();
this.props.fetchLeaders();
}
render() {
return (
<View style={{flex: 1, paddingTop: Platform.OS === 'ios' ? 0 : Expo.Constants.statusBarHeight }}>
</View>
);
}
}
const mapStateToProps = state => {
return {
}
}
connect(mapStateToProps, mapDispatchToProps)(Something);
export default App;我想我也应该在这里分享我的actionCreators ....
import * as ActionTypes from './ActionTypes';
import { baseUrl } from '../shared/baseUrl';
export const fetchComments = () => (dispatch) => {
return fetch(baseUrl + 'comments')
.then(response => {
if(response.ok) {
return response;
}
else {
var error = new Error('Error' + response.status + ':' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errMess = new Error(error.message);
throw errMess;
})
.then(response => response.json())
.then(comments => dispatch(addCommnets(comments)))
.catch(error => dispatch(commentsFailed(error.message)))
}
export const fetchDishes = () => (dispatch) => {
dispatch(dishesLoading());
return fetch(baseUrl + 'dishes')
.then(response => {
if(response.ok) {
return response;
}
else {
var error = new Error('Error' + response.status + ':' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errMess = new Error(error.message);
throw errMess;
})
.then(response => response.json())
.then(dishes => dispatch(addDishes(dishes)))
.catch(error => dispatch(dishesFailed(error.message)))
}
export const fetchPromos = () => (dispatch) => {
dispatch(promosLoading());
return fetch(baseUrl + 'promotions')
.then(response => {
if(response.ok) {
return response;
}
else {
var error = new Error('Error' + response.status + ':' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errMess = new Error(error.message);
throw errMess;
})
.then(response => response.json())
.then(promos => dispatch(addPromos(promos)))
.catch(error => dispatch(promosFailed(error.message)))
}
export const fetchLeaders = () => (dispatch) => {
dispatch(leadersLoading());
return fetch(baseUrl + 'leaders')
.then(response => {
if(response.ok) {
return response;
}
else {
var error = new Error('Error' + response.status + ':' + response.statusText);
error.response = response;
throw error;
}
},
error => {
var errMess = new Error(error.message);
throw errMess;
})
.then(response => response.json())
.then(leaders => dispatch(addleaders(leaders)))
.catch(error => dispatch(leadersFailed(error.message)))
}
export const leadersLoading = () => ({
type: ActionTypes.LEADERS_LOADING
});
export const leadersFailed = (errmess) => ({
type:ActionTypes.LEADERS_FAILED,
payload: errmess
})只上传了actionCreators的一部分，我认为这可能是必要的
所有的fetch函数都必须被传递，并且在某些组件中不应该出现未定义的内容。
回答 2
Stack Overflow用户
回答已采纳
发布于 2019-08-13 04:48:44
您正在定义一个连接的组件，但没有使用它。
下面是导入和导出的内容：
// Something.js
// A couple of imports...
class Something extends Component {
// ...
}
const mapDispatchToProps = (dispatch) => ({
fetchDishes: () => dispatch(fetchDishes()),
fetchComments: () => dispatch(fetchComments()),
fetchPromos: () => dispatch(fetchPromos()),
fetchLeaders: () => dispatch(fetchLeaders()),
});
export default connect(null, mapDispatchToProps)# App.js
// A couple of imports ...
import Something from './Something'
function App() {
return (
<Provider store = {store}>
<Something />
</Provider>
);
}注意:由于您没有来自mapStateToProps的ay道具，您可以简单地将null作为第一个参数。
Stack Overflow用户
发布于 2019-08-13 04:49:29
您的App组件正在直接使用您的Something组件，而不是它的连接版本。
...
const ConnectedSomething = connect(mapStateToProps, mapDispatchToProps(Something);
function App() {
return (
<Provider store={store}>
<ConnectedSomething />
</Provider>
);
}
...页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57467936
复制相关文章
相似问题
腾讯云开发者
