Thunks 不调度

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);

Thunks 不调度

Thunks not dispatching

meteor

reactjs

redux

redux-thunk