Warum sendet Redux meine Aktion nicht zum Reducer?

Question

In meiner App React Redux App versuche ich den Status zu aktualisieren, wenn der Benutzer einen neuen Aufenthaltsstatus (z. B. Alabama) aus einem Drop-down auswählt. Nichts scheint jedoch zu geschehen. In meinen Redux-Entwicklungstools scheint sich der Redux-Status nicht zu ändern, wenn ich das Element im Dropdown-Menü ändere. Hier ist mein Code:

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 - meine Wurzel redu cer:

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

const rootReducer = combineReducers({ 
    accountDetails 
}); 

export default rootReducer; 

initialState.js:

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

Und schließlich, hier ist das, was mein Zustand wie in den Werkzeugen Redux dev aussieht:

Was ist Ich mache falsch?

Answer 1

Sie haben einen Tippfehler.

updateStateOfResidence={props.actions.updateStateOfResidence}

statt

updateStateOfResidence={actions.updateStateOfResidence}

Der Grund, warum es still versagt ist, weil Sie die Vanille actions verwenden, dass es nicht an den Verteiler begrenzt ist, anstelle der begrenzt eine provided by connect() in props.