javascript - mapDispatchToProps 未将 actionCreators 分派(dispatch)到所需组件

Question

我正在尝试使用mapDispatchToProps来获取Something组件中所有 Action 创建者的 Action ，但似乎Something组件的 Prop 中发生的任何事情都是未定义的我不知道为什么......我已经检查了我的actioncreators和其他文件但他们似乎是正确的，我对此很确定

我已经在这里尝试了我能做的一切，但可能会遗漏一些小东西，我很确定它就在我提供的这段代码中

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

必须传递所有获取函数，并且 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 的任何 Prop ，因此您可以简单地将 null 作为第一个参数。