mapDispatchToProps不会将actionCreators调度到所需的组件

Question

我正在尝试使用 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;

我想我也应该在这里分享我的动作创作者......

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
})

只有一部分动作创作者被上传，我认为这可能是必要的

必须传递所有获取函数，并且不应在 Something 组件中未定义任何内容。

Answer 1

您正在定义连接的组件，但不使用它。

这是进口和出口：

// 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作为第一个参数。

Answer 2

您的App组件直接使用Something组件，而不是其连接的版本。

...
const ConnectedSomething = connect(mapStateToProps, mapDispatchToProps(Something);
function App() {
return (
<Provider store={store}>
<ConnectedSomething />
</Provider>
);
}
...