0

谁能看到我的thunks有什么问题？永远不会调用内部代码，但会调用外部代码。这是一个例子：

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;

毫无疑问，您会认出其中很多代码，因为它改编自redux 文档中的优秀示例。

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

4

1 回答 1

1

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

尝试将您的connect呼叫更改为此，它应该可以工作：

connect(mapStateToProps, {
  onSave: saveCustomer,
  onChange: editCustomer,
  selectCustomer,
  selectNewCustomer
})(YourComponent);
于 2016-03-03T10:30:52.730 回答