Question

任何人都可以看到我的thunk有什么问题吗？永远不会调用内部代码，但外部代码是。这是一个例子：

export function selectCustomer(customerId) {
    console.log("This appears in the console fine");
    return (dispatch, getState) => {
        console.log("This doesn't.. why don't you run..?");
        dispatch(loadCustomerToEdit(customerId));
    }
};

这就是我将它连接到组件事件的方式：

import React, { Component, PropTypes } from 'react';
import CustomerEditForm from './CustomerEditForm.jsx';
import { editCustomer, selectCustomer, selectNewCustomer, saveCustomer } from '../redux/action_creators.jsx';


export const CustomerContainer = React.createClass({   
    componentWillMount() {
        const customerId = FlowRouter.getParam('_id');

        if (customerId) {
            this.sub = Meteor.subscribe('CustomerCompany.get', customerId, this.setCustomerInState);
        } else {
            this.props.selectNewCustomer();
        }
    },

    setCustomerInState() {
        console.log("setCustomerInState");
        this.props.selectCustomer(FlowRouter.getParam('_id'));
    },

    // Snip

    render() {
        console.log("CustomerContainer.render()", this.props);
        if (this.sub && !this.sub.ready) {
            return (<h1>Loading</h1>);
        }
        return (
            <CustomerEditForm
                customer = {this.props.customer}
                onChange = {this.props.onChange}
                onSave = {this.props.onSave}
                errors = {this.props.customer.errors}
                isValid = {this.props.customer.isValid}
                salesRegionOptions={SalesRegions.find().fetch()}
            />
        );
    }
});

CustomerContainer.propTypes = {
    customer: PropTypes.object,
    onSave: PropTypes.func.isRequired,
    onChange: PropTypes.func.isRequired,
    selectCustomer: PropTypes.func.isRequired,
    selectNewCustomer: PropTypes.func.isRequired   
};

function mapStateToProps(state) {
    console.log("CustomerContainer.mapStateToProps", state)
    return {
        customer: state.userInterface.customerBeingEdited
    };
}

function mapDispatchToProps(dispatch) {
    //console.log("CustomerContainer.mapDispatchToProps", Actions.customerSave)
    return {
        onSave: saveCustomer,
        onChange: editCustomer,
        selectCustomer,
        selectNewCustomer
    };
}

export default connect(mapStateToProps, mapDispatchToProps
)(CustomerContainer);

这是我的商店设置：

import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import rootReducer from './reducers.jsx';
import thunk from 'redux-thunk';

const middleware = [ thunk ]

const createStoreWithMiddleware = applyMiddleware(...middleware)(createStore)
const store = createStoreWithMiddleware(rootReducer)

export default store;

毫无疑问，您会认识到很多此代码，因为它是根据优秀的examples in the redux documentation进行改编的。

调用selectCustomer函数，因此mapDispatchToProps似乎已将selectCustomer函数连接到组件，它只是selectCustomer返回的方法没有被召唤。

Answer 1

问题在于您的mapDispatchToProps功能。如果你传递一个函数，react-redux不会自动包装你的动作创建者，只有当你传递一个对象时！（或者如果您使用bindActionCreators手动绑定它们）

尝试更改connect对此的调用，它应该有效：

connect(mapStateToProps, {
  onSave: saveCustomer,
  onChange: editCustomer,
  selectCustomer,
  selectNewCustomer
})(YourComponent);

没有派遣的Thunk

1 个答案: