我写了一个当前已成功调度的动作。我可以看到网络请求,它确实返回了一个成功的响应,其中包含所请求的对象,但是该对象并未使其返回操作。相反,它以未定义的形式返回,我不知道为什么。我在俯视什么?
商店:
import * as redux from "redux";
import thunk from "redux-thunk";
import {permitCellDesignsReducer, [other reducers her...]}
export const init = () => const reducer = redux.combineReducers({ {permitCellDesigns: permitCellDesignsReducer,...} });
const store = redux.createStore(reducer, redux.applyMiddleware(thunk));
return store;
操作:
export const getPermitCellDesignByFacilityId = id => {
debugger;
return dispatch => {
axios.get("/api/facilities/permits/cellDesign/" + id)
.then(res => { return res.date })
.then(cells => {
dispatch(getFacilityCellDesignsSuccess(cells));
})
}
}
const getFacilityCellDesignsSuccess = cells => {
return {
type: "GET_CELL_DESIGN_LIST",
action: cells
}
}
减速机:
const INITIAL_STATE = {
permitCellDesigns: {}
}
export const permitCellDesignsReducer = (state = INITIAL_STATE.permitCellDesigns, action) => {
debugger;
switch (action.type) {
case "GET_CELL_DESIGN_LIST":
return {
...state,
permitCellDesigns: action.cells
}
default:
return state
}
}
已执行的操作:
import React from "react";
import { connect } from "react-redux";
import { Row, Col, Button } from "react-bootstrap";
import { Link } from "react-router-dom";
import FacilityHeader from '../facilities/FacilityHeader';
import * as actions from "../../actions/FacilityActions";
import * as permits from "../../actions/PermitActions";
import PermitPlanApprovalTable from './permitPlanApproval/PermitPlanApprovalTable';
import PermitCellDesignTable from './permitCellDesign/PermitCellDesignTable';
class PermitInfo extends React.Component {
componentDidMount() {
this.props.dispatch(actions.getFacilityById(this.props.id) );
this.props.dispatch(permits.getPermitPlanApprovalsByFacility (this.props.id));
this.props.dispatch(permits.getPermitCellDesignByFacilityId(this.props.id)
);
}
render() {
debugger;
const { facility, permitCellDesigns } = this.props;
if (!permitCellDesigns) {
return <div>Loading...</div>
}
return (
<div>
<FacilityHeader {...this.props} />
<Row>
<Col>
<h4>Permit/Plan Approvals</h4>
</Col>
<Col>
<Link to={{
pathname: `/facilities/permits/permitplanapproval/${this.props.id}`,
state: { facilityName: facility.facilityName }
}}><Button className="btn btn-light edit">Create</Button></Link>
</Col>
</Row>
<Row>
<Col>
<PermitPlanApprovalTable {...this.props} />
</Col>
</Row>
<Row>
<Col>
<br /><h4>Cell Design Information</h4>
</Col>
<Col>
<Link to={{
pathname: `/facilities/permits/celldesign/${this.props.id}`,
state: { facilityName: facility.facilityName }
}}><Button className="btn btn-light edit">Create</Button></Link>
</Col>
</Row>
<Row>
<Col>
<PermitCellDesignTable {...this.props} />
</Col>
</Row>
</div>
)
}
}
const mapStateToProps = state => ({
facility: state.facility.facility,
permitApprovals: state.permitApprovals.permitApprovals,
permitCellDesigns: state.permitCellDesigns.permitCellDesigns
});
export default connect(mapStateToProps)(PermitInfo);
网络请求响应: