用Redux异步填充React下拉列表

Question

背景

我正在尝试创建一个下拉菜单，该下拉菜单从后端API检索状态代码（AZ，WI，WY等），然后使用这些值填充屏幕上的下拉菜单。

我有一个看起来像这样的React组件（省略号代表我为清楚起见而省略的代码）：

Person.jsx

export class Person extends React.Component {
  constructor(props) {
  super(props);

  ...

    this.props.getStateCodes();
  }

  render(){
    ...
    <select
              id="personState"
              name="personState"
              className="form-control dropDownStyle"
              onChange={this.handleChange}
              value={this.props.person.personState}
            >
                {this.props.stateCodes && this.props.stateCodes.map((option) => (
                        <option key={option.id} value={option.data}>{option.data}</option>
                        ))
                }
            </select>
    ...
  }

}

然后我有Redux动作创建者，包括以下摘录：

personContract.js

export const actionCreators = {
...
  getStateCodes: () => async (dispatch) => {
    getStateCodesResponse(dispatch);
},
...
export function getStateCodesResponse(dispatch) {
const endpoint = window.location.origin + '/Home/GetStateCodes';
fetch(endpoint, {
    credentials: 'same-origin'
})
    .then(function (response) {
        if (!response.ok) {
            const errors = ['Unable to retrieve state codes.'];
            dispatch({ type: "SET_ERROR", errors: errors });
            document.body.style.cursor = 'default';
            return;
        }
        return response.json();
    }).then(function (data) {
        if (data !== undefined) {
            const stateCodes = data.stateCodes;
            // const stateCodes = result.PayLoad.StateCodes;
            document.body.style.cursor = 'default';
            dispatch({ type: 'STATECODES', stateCodes });
        }
    });
}
...
}

然后是包含以下内容的减速器

Contract.js

const initialState ={
...
stateCodes: [],
...
};
export const reducer = (state, action) => {
...
if (action.type == "STATECODES"){
    const stateCodes = action.stateCodes;
    return {
        ...state,
        errors: [],
        stateCodes: stateCodes
    }
}
...
}

问题

最初，我没有在Person.jsx文件中包含{this.props.stateCodes &&。当时的问题是，我得到一个错误，未定义this.props.stateCodes。我添加了{this.props.stateCodes &&，但是现在它根本不再运行this.props.stateCodes.map。检索状态代码后，几乎好像我需要render()才能再次运行，但是我不知道该怎么做。