Question

我是React / Redux的新手和一般的编程。下面是我的3个文件之间的代码。我正在将商店传递给包装我的React-Router的Provider。问题出在1），我知道getTweets运行并且操作正确导入，因为testing（）运行没有问题。但是fidingAllTweets中的调试器永远不会被命中。你们中的任何一位老兵能告诉我我的问题是什么吗？

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;

Answer 1

您应该将fetchAllTweets动作创建者返回的值作为dispatch参数传递，而不是动作创建者函数本身。

使用此：

return dispatch(fetchAllTweets());

而不是：

return dispatch(fetchAllTweets);

Answer 2

您可能需要尝试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()

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

2 个答案: