Действие React-Redux отправлено успешно, но возвращается неопределенным - PullRequest
0 голосов
/ 22 марта 2019

Я написал действие, которое в настоящее время успешно отправлено. Я вижу сетевой запрос, и он возвращает успешный ответ с запрошенным объектом (ами), но этот объект не возвращает его к действию. Вместо этого он возвращается как неопределенный, и я не могу понять, почему. Что я пропускаю?

МАГАЗИН:

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

...