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 - 내 루트 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: '' 
    } 
}; 

그리고 마지막으로, 여기에 내 상태가 돌아 오는 dev에 도구의 모습입니다 : 무엇 오전

내가 잘못하고있어?

Answer 1

오타가 있습니다.

updateStateOfResidence={props.actions.updateStateOfResidence}

대신

updateStateOfResidence={actions.updateStateOfResidence}

대신에 의해 제공되는 경계 하나, 그것은 디스패처에 묶여되지 않는 바닐라 actions를 사용하고 있기 때문에 자동으로 실패하는 이유 connect() in props.