的thunk不派遣

Question

有人能看到有什麼不對我的thunk？內部代碼永遠不會被調用，但外部代碼是。這是一個例子的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);