2017-02-16 15 views
0

我是新來的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; 

回答

1

您應當經fetchAllTweets行動的創建者爲dispatch的說法,而不是創造者的行動本身的函數返回值。

使用此:

return dispatch(fetchAllTweets()); 

,而不是這樣的:

return dispatch(fetchAllTweets); 
0

你可能想嘗試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()

+0

謝謝,是生產代碼這個好的做法呢? – stckoverflowaccnt12

+0

這是一個很好的做法。這可以幫助你將你的Reduce邏輯保存在你的容器中,這意味着你的組件將變得更加清潔,並且只需要從它的道具中調用這些動作。 –

相關問題