React-Redux Action已成功调度,但返回未定义

时间:2019-03-22 16:46:23

标签: redux react-redux redux-thunk

我写了一个当前已成功调度的动作。我可以看到网络请求,它确实返回了一个成功的响应,其中包含所请求的对象,但是该对象并未使其返回操作。相反,它以未定义的形式返回,我不知道为什么。我在俯视什么?

商店:

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);

网络请求响应:

Network Request Response

未定义返回的操作: Action returned as undefined

所有其他已派发的道具都在场,但没有相关的道具 Not In Props

0 个答案:

没有答案