问mapDispatchToProps未将actionCreators调度到所需组件
EN

Stack Overflow用户

提问于 2019-08-12 20:38:03

回答 2查看 162关注 0票数 0

我正在尝试使用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函数都必须被传递，并且在某些组件中不应该出现未定义的内容。

react-native

react-redux

javascript

reactjs

媒体处理1元起

智能、强大、全面的多媒体数据处理服务，助您提升媒体质量、降低成本，媒体处理套餐低至1元

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-08-12 20: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作为第一个参数。

票数 2

Stack Overflow用户

发布于 2019-08-12 20:49:29

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

...

const ConnectedSomething = connect(mapStateToProps, mapDispatchToProps(Something);

function App() {
  return (
    <Provider store={store}>
      <ConnectedSomething />
    </Provider>
  );
}

...