2017-02-16 21 views
0

React/Reduxを初めてお使いでプログラミングするのは初めてです。以下は3つのファイル間の私のコードです。私は自分のReact-Routerをラップするプロバイダにストアを渡しています。問題は1)ですが、testing()が問題なく動作するため、getTweetsが実行され、アクションが正しくインポートされていることがわかります。しかし、アクションの下の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)ストアあなたがbindActionCreatorsを試してみて、それを使用することがあります

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

としてそれらを呼び出します。

使用この:

return dispatch(fetchAllTweets()); 

これに代えて:

return dispatch(fetchAllTweets); 
0

コードあなたの容器は以下の通り:

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; 

は、その後、あなたのコンポーネントにちょうどあなたがdispatch引数ではなく、アクションのクリエータ関数自体としてfetchAllTweetsアクションの作成者によって返された値を渡す必要がありthis.props.actions.fetchAllTweets()this.props.actions.test()

+0

おかげで、生産コードのため、この良い方法ですか? – stckoverflowaccnt12

+0

これは良い習慣です。これはあなたのコンテナの中にあなたの部品を保つために役立ちます、つまり、あなたのコンポーネントがクリーナーであり、そのアクションをその小道具から呼び出す必要があるだけであることを意味します。 –

関連する問題