如何获取mapDispatchToProps方法来调度动作

我是新来的React/Redux和一般编程。以下是我在3个文件之间的代码。我将商店传递给包装我的React-Router的Provider。问题在于1），我知道getTweets运行并且操作正确导入，因为testing（）运行没有问题。但是在action下的fetchAllTweets中的调试器从来没有被击中。请问任何一位退伍军人，请告诉我我的问题可能是什么？如何获取mapDispatchToProps方法来调度动作

1）相关容器代码：

import {connect} from 'react-redux'; 
    import Feed from './feed'; 
    import {fetchAllTweets, testing} from '../../actions/tweet_actions'; 
    import thunk from 'redux-thunk'; 

    const mapDispatchToProps = (dispatch) => ({ 
     getTweets:() => { 
      testing(); 
      return dispatch(fetchAllTweets); 
     } 
    }); 

    const FeedContainer = connect(mapStateToProps, mapDispatchToProps)(Feed); 

    export default FeedContainer;

2）相关操作的代码

import * as APIUtil from '../util/tweet_api_util'; 
import Constants from '../constants/constants'; 
import thunk from 'redux-thunk'; 

export const fetchAllTweets =() => dispatch => { 
    debugger; 
    console.log('fetch all tweets action'); 
    APIUtil.fetchAllTweets() 
     .then(tweets => dispatch(receiveTweets(tweets))), 
     err => dispatch(receiveErrors(err.responseJSON)) 
}; 

export const testing =() => { 
    debugger; 
    console.log("worked"); 
}

3）店内码

import { createStore, applyMiddleware } from 'redux'; 
import RootReducer from '../reducers/root_reducer'; 
import thunk from 'redux-thunk'; 

const configureStore = (preloadedState = {}) => (
    createStore(
    RootReducer, 
    preloadedState, 
    applyMiddleware(thunk) 
) 
) 

export default configureStore;

来源

2017-02-16 stckoverflowaccnt12

您应当经fetchAllTweets行动的创建者为dispatch的说法，而不是创造者的行动本身的函数返回值。

使用此：

return dispatch(fetchAllTweets());

，而不是这样的：

return dispatch(fetchAllTweets);

来源

2017-02-16 08:50:45

你可能想尝试bindActionCreators，并用它在您的货柜如下：

import {connect} from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import Feed from './feed'; 
import { tweetActions } from '../../actions/tweet_actions'; 
import thunk from 'redux-thunk'; 

const mapDispatchToProps = (dispatch) => ({ 
    actions: bindActionCreators(tweetActions, dispatch); 
}); 

const FeedContainer = connect(mapStateToProps, mapDispatchToProps)(Feed); 

export default FeedContainer;

然后在你的分量只是称他们为this.props.actions.fetchAllTweets()和this.props.actions.test()

来源

2017-02-16 05:32:06

谢谢，是生产代码这个好的做法呢？ – stckoverflowaccnt12

这是一个很好的做法。这可以帮助你将你的Reduce逻辑保存在你的容器中，这意味着你的组件将变得更加清洁，并且只需要从它的道具中调用这些动作。 –

如何获取mapDispatchToProps方法来调度动作

回答

相关问题