爲什麼Redux不將我的動作分配給減速器？

Question

在我的應用程序React Redux應用程序中，我試圖在用戶從下拉菜單中選擇新的居住狀態（例如阿拉巴馬州）時更新狀態。然而，似乎沒有任何事情發生。在我的Redux開發工具中，當我在下拉菜單中更改項目時，Redux狀態不會改變。這裏是我的代碼：

actionTypes.js

export const UPDATE_STATE_OF_RESIDENCE = 'UPDATE_STATE_OF_RESIDENCE'; 

accountDetailsActions.js

import * as types from '../constants/actionTypes'; 

export function updateStateOfResidence(stateOfResidence) { 
    return {type: types.UPDATE_STATE_OF_RESIDENCE, stateOfResidence}; 
} 

AccountDetailsAccordionContainer.js

import React, {PropTypes} from 'react'; 
import {connect} from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import * as actions from '../actions/accountDetailsActions'; 
import AccountDetailsAccordion from '../components/AccountDetailsAccordion'; 

export const AccountDetailsAccordionContainer = (props) => { 
    return (
    <AccountDetailsAccordion 
     updateStateOfResidence={actions.updateStateOfResidence} 
    /> 
); 
}; 

AccountDetailsAccordionContainer.propTypes = { 
    actions: PropTypes.object.isRequired, 
}; 

function mapStateToProps(state) { 
    return { 
    accountDetails: state.accountDetails 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(actions, dispatch) 
    }; 
} 

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

個

AccountDetailsAccordion.js

import React from 'react'; 
import GeneralSelect from './common/GeneralSelect'; 
import States from '../data/State'; 
import AccountTypes from '../data/AccountType'; 

// Since this component is simple and static, there's no parent container for it. 
const AccountDetailsAccordion = (props) => { 
    return (
    <div> 
     <h3 id="accountDetailsPanel">SELECT STATE AND ACCOUNT TYPE</h3> 
     <div id="accountDetailsContainer" className="inner-content" style={{paddingTop: 10}}> 
     <div> 
      <div id="accountOwnerSignerInfo" style={{float:"left", paddingRight:15}}> 
      </div> 
      <div id="accountAttributes" style={{float:"left"}}> 
       <div id="stateSelectionContainer" style={{paddingLeft:5+"em"}}> 
        <div className="input-label">Client's State of Residency: (required)</div> 
        <GeneralSelect id="stateSelect" classString="account-details-field" items={States} defaultString="Select a State" onChange={props.updateStateOfResidence} /> 
       </div>    
      </div> 
     </div> 
     </div> 
    </div> 
); 
}; 

AccountDetailsAccordion.propTypes = { 
    updateStateOfResidence: React.PropTypes.func.isRequired 
}; 

export default AccountDetailsAccordion; 

GeneralSelect.js

import React from 'react'; 

const GeneralSelect = (props) => { 
    const handleChange = (event) => { 
    props.onChange(event.target.value); 
    }; 

    return (
    <select id={props.id} className = {props.classString} style={props.styleObject} onChange={handleChange}> 
     <option value="nothingSelected" defaultValue>{props.defaultString}</option> 
     { 
      props.items.map((item) => { 
       //if the item has an enabled property, let's use it. otherwise, render the item no matter what 
       return (
        <option key={item.id} value={item.id}>{item.name}</option> 
       ); 
      }) 
     } 
    </select> 
); 
}; 

GeneralSelect.propTypes = { 
    id: React.PropTypes.oneOfType([ 
     React.PropTypes.string, 
     React.PropTypes.number 
    ]), 
    classString: React.PropTypes.string, 
    styleObject: React.PropTypes.object, 
    defaultString: React.PropTypes.string, 
    items: React.PropTypes.oneOfType([ 
     React.PropTypes.array, 
     React.PropTypes.object 
    ]).isRequired, 
    onChange: React.PropTypes.func 
}; 

export default GeneralSelect; 

accountDetailsReducer.js

import {UPDATE_STATE_OF_RESIDENCE} from '../constants/actionTypes'; 
import objectAssign from 'object-assign'; 
import initialState from './initialState'; 

export default function accountDetailsReducer(state = initialState, action) { 
    let newState; 
    console.log(action.type); 
    switch (action.type) { 
    case UPDATE_STATE_OF_RESIDENCE: 
     console.log(action); 
     return objectAssign({}, state, {stateOfResidence: action.stateOfResidence}); 

    default: 
     console.log('default'); 
     return state; 
    } 
} 

index.js - 我的根熱度CER：

import { combineReducers } from 'redux'; 
import accountDetails from './accountDetailsReducer'; 

const rootReducer = combineReducers({ 
    accountDetails 
}); 

export default rootReducer; 

initialState.js：

export default { 
    accountDetails: { 
    stateOfResidence: '', 
    accountType: '', 
    accountNumber: '' 
    } 
}; 

最後，這裏是我的狀態看起來像在終極版開發工具：

上午什麼我做錯了？

Answer 1

您有一個錯字。而不是

updateStateOfResidence={props.actions.updateStateOfResidence}

updateStateOfResidence={actions.updateStateOfResidence}

失敗的原因默默的，因爲你正在使用的不是所提供的限定一個香草actions，它是無界的調度員，是什麼原因connect() in props。