Javascript Redux-从状态中删除项_Javascript_Reactjs_Redux_State

Javascript Redux-从状态中删除项

javascript reactjs redux

Javascript Redux-从状态中删除项,javascript,reactjs,redux,state,Javascript,Reactjs,Redux,State,我在从状态删除项目时遇到问题我有一个容器发票，它显示在发票项中呈现的发票列表我正在使用mapStateToProps和action/reducer获取所有发票然后，我在InvoiceItem中使用mapDispatchToProps在delete按钮上调度操作。（仅从状态中删除，而不是从数据库中删除）这是处理Redux操作（Connect）的正确用法吗？通过使用React16的上下文API，我知道这是我处理问题的方式使用action和reducer文件中的console.log调试ma

我在从状态删除项目时遇到问题

我有一个容器发票，它显示在发票项中呈现的发票列表

我正在使用mapStateToProps和action/reducer获取所有发票

然后，我在InvoiceItem中使用mapDispatchToProps在delete按钮上调度操作。（仅从状态中删除，而不是从数据库中删除）

这是处理Redux操作（Connect）的正确用法吗？通过使用React16的上下文API，我知道这是我处理问题的方式

使用action和reducer文件中的console.log调试mapDispatchToProps时，有效负载是未定义的

下面是我的代码：

types.js

export const GET_INVOICES = "GET_INVOICES";
export const GET_INVOICE = "GET_INVOICE";
export const DELETE_INVOICE = "DELETE_INVOICE";
export const INVOICES_LOADING = "INVOICES_LOADING";

import axios from "axios";
import { GET_INVOICES, DELETE_INVOICE, INVOICES_LOADING } from "./types";

// getInvoices is a large axios call that goes here. It works fine.
// Leaving it out in this example.

// Delete Invoice
export const deleteInvoice = invoice => dispatch => {
 console.log(invoice) // UNDEFINED
dispatch({
  type: DELETE_INVOICE,
  payload: invoice
});
};

// Invoices loading
export const setInvoicesLoading = () => {
 return {
  type: INVOICES_LOADING
 };
};

import {
 GET_INVOICES,
 DELETE_INVOICE,
 INVOICES_LOADING
 } from "../actions/types";

const initialState = {
invoices: [],
loading: false
};

 export default function(state = initialState, action) {
  switch (action.type) {
    case INVOICES_LOADING:
     return {
      ...state,
      loading: true
     };
   case GET_INVOICES:
     return {
     ...state,
     invoices: action.payload,
     loading: false
    };
   case DELETE_INVOICE:
    return invoices.filter(invoice => invoice.Id !== invoice);
    default:
    return state;
   }
  }

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { deleteInvoice } from "../../actions/invoiceActions";

class InvoiceItem extends Component {
 onDeleteClick(e) {
 this.props.deleteInvoice();
 }
 render() {
  const { invoice } = this.props;

    return (
     <div className="card card-body bg-light mb-3">
       <div className="row">
         <div className="col-lg-6 col-md-4 col-8">
           <h3>Invoice: {invoice.InvoiceNumber}</h3>
           <p>Client: {invoice.Contact.Name}</p>
           <button
            onClick={this.onDeleteClick.bind(this)}
            className="btn btn-danger">
            Remove
           </button>
      </div>
    </div>
  </div>
  );
  }
 }

 InvoiceItem.propTypes = {
 invoice: PropTypes.object.isRequired,
 deleteInvoice: PropTypes.func
 };

 const mapDispatchToProps = dispatch => {
   return {
     deleteInvoice: invoice => dispatch(deleteInvoice(invoice))
    };
  };

  export default connect(
   mapDispatchToProps,
   { deleteInvoice }
  )(InvoiceItem);

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import Spinner from "../common/Spinner";
import InvoiceItem from "./InvoiceItem";
import { getInvoices } from "../../actions/invoiceActions";

class Invoices extends Component {
  componentDidMount() {
  this.props.getInvoices();
}

render() {
  const { invoices, loading } = this.props.invoice;
  let invoiceItems;

  if (invoices === null || loading) {
   invoiceItems = <Spinner />;
  } else {
  if (invoices.length > 0) {
    invoiceItems = invoices.map(invoice => (
      <InvoiceItem key={invoice.Id} invoice={invoice} />
    ));
  } else {
    invoiceItems = <h4>No invoices found...</h4>;
  }
}

return (
  <div className="profiles">
    <div className="container">
      <div className="row">
        <div className="col-md-12">
          <h1 className="display-4 text-center">Invoices</h1>
          {invoiceItems}
        </div>
      </div>
    </div>
  </div>
  );
 }
}

Invoices.propTypes = {
 getInvoices: PropTypes.func.isRequired,
 invoice: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
 invoice: state.invoices
});


export default connect(
 mapStateToProps,
 { getInvoices }
)(Invoices);

invoiceActions.js

export const GET_INVOICES = "GET_INVOICES";
export const GET_INVOICE = "GET_INVOICE";
export const DELETE_INVOICE = "DELETE_INVOICE";
export const INVOICES_LOADING = "INVOICES_LOADING";

import axios from "axios";
import { GET_INVOICES, DELETE_INVOICE, INVOICES_LOADING } from "./types";

// getInvoices is a large axios call that goes here. It works fine.
// Leaving it out in this example.

// Delete Invoice
export const deleteInvoice = invoice => dispatch => {
 console.log(invoice) // UNDEFINED
dispatch({
  type: DELETE_INVOICE,
  payload: invoice
});
};

// Invoices loading
export const setInvoicesLoading = () => {
 return {
  type: INVOICES_LOADING
 };
};

import {
 GET_INVOICES,
 DELETE_INVOICE,
 INVOICES_LOADING
 } from "../actions/types";

const initialState = {
invoices: [],
loading: false
};

 export default function(state = initialState, action) {
  switch (action.type) {
    case INVOICES_LOADING:
     return {
      ...state,
      loading: true
     };
   case GET_INVOICES:
     return {
     ...state,
     invoices: action.payload,
     loading: false
    };
   case DELETE_INVOICE:
    return invoices.filter(invoice => invoice.Id !== invoice);
    default:
    return state;
   }
  }

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { deleteInvoice } from "../../actions/invoiceActions";

class InvoiceItem extends Component {
 onDeleteClick(e) {
 this.props.deleteInvoice();
 }
 render() {
  const { invoice } = this.props;

    return (
     <div className="card card-body bg-light mb-3">
       <div className="row">
         <div className="col-lg-6 col-md-4 col-8">
           <h3>Invoice: {invoice.InvoiceNumber}</h3>
           <p>Client: {invoice.Contact.Name}</p>
           <button
            onClick={this.onDeleteClick.bind(this)}
            className="btn btn-danger">
            Remove
           </button>
      </div>
    </div>
  </div>
  );
  }
 }

 InvoiceItem.propTypes = {
 invoice: PropTypes.object.isRequired,
 deleteInvoice: PropTypes.func
 };

 const mapDispatchToProps = dispatch => {
   return {
     deleteInvoice: invoice => dispatch(deleteInvoice(invoice))
    };
  };

  export default connect(
   mapDispatchToProps,
   { deleteInvoice }
  )(InvoiceItem);

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import Spinner from "../common/Spinner";
import InvoiceItem from "./InvoiceItem";
import { getInvoices } from "../../actions/invoiceActions";

class Invoices extends Component {
  componentDidMount() {
  this.props.getInvoices();
}

render() {
  const { invoices, loading } = this.props.invoice;
  let invoiceItems;

  if (invoices === null || loading) {
   invoiceItems = <Spinner />;
  } else {
  if (invoices.length > 0) {
    invoiceItems = invoices.map(invoice => (
      <InvoiceItem key={invoice.Id} invoice={invoice} />
    ));
  } else {
    invoiceItems = <h4>No invoices found...</h4>;
  }
}

return (
  <div className="profiles">
    <div className="container">
      <div className="row">
        <div className="col-md-12">
          <h1 className="display-4 text-center">Invoices</h1>
          {invoiceItems}
        </div>
      </div>
    </div>
  </div>
  );
 }
}

Invoices.propTypes = {
 getInvoices: PropTypes.func.isRequired,
 invoice: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
 invoice: state.invoices
});


export default connect(
 mapStateToProps,
 { getInvoices }
)(Invoices);

invoicesReducer.js

export const GET_INVOICES = "GET_INVOICES";
export const GET_INVOICE = "GET_INVOICE";
export const DELETE_INVOICE = "DELETE_INVOICE";
export const INVOICES_LOADING = "INVOICES_LOADING";

import axios from "axios";
import { GET_INVOICES, DELETE_INVOICE, INVOICES_LOADING } from "./types";

// getInvoices is a large axios call that goes here. It works fine.
// Leaving it out in this example.

// Delete Invoice
export const deleteInvoice = invoice => dispatch => {
 console.log(invoice) // UNDEFINED
dispatch({
  type: DELETE_INVOICE,
  payload: invoice
});
};

// Invoices loading
export const setInvoicesLoading = () => {
 return {
  type: INVOICES_LOADING
 };
};

import {
 GET_INVOICES,
 DELETE_INVOICE,
 INVOICES_LOADING
 } from "../actions/types";

const initialState = {
invoices: [],
loading: false
};

 export default function(state = initialState, action) {
  switch (action.type) {
    case INVOICES_LOADING:
     return {
      ...state,
      loading: true
     };
   case GET_INVOICES:
     return {
     ...state,
     invoices: action.payload,
     loading: false
    };
   case DELETE_INVOICE:
    return invoices.filter(invoice => invoice.Id !== invoice);
    default:
    return state;
   }
  }

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { deleteInvoice } from "../../actions/invoiceActions";

class InvoiceItem extends Component {
 onDeleteClick(e) {
 this.props.deleteInvoice();
 }
 render() {
  const { invoice } = this.props;

    return (
     <div className="card card-body bg-light mb-3">
       <div className="row">
         <div className="col-lg-6 col-md-4 col-8">
           <h3>Invoice: {invoice.InvoiceNumber}</h3>
           <p>Client: {invoice.Contact.Name}</p>
           <button
            onClick={this.onDeleteClick.bind(this)}
            className="btn btn-danger">
            Remove
           </button>
      </div>
    </div>
  </div>
  );
  }
 }

 InvoiceItem.propTypes = {
 invoice: PropTypes.object.isRequired,
 deleteInvoice: PropTypes.func
 };

 const mapDispatchToProps = dispatch => {
   return {
     deleteInvoice: invoice => dispatch(deleteInvoice(invoice))
    };
  };

  export default connect(
   mapDispatchToProps,
   { deleteInvoice }
  )(InvoiceItem);

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import Spinner from "../common/Spinner";
import InvoiceItem from "./InvoiceItem";
import { getInvoices } from "../../actions/invoiceActions";

class Invoices extends Component {
  componentDidMount() {
  this.props.getInvoices();
}

render() {
  const { invoices, loading } = this.props.invoice;
  let invoiceItems;

  if (invoices === null || loading) {
   invoiceItems = <Spinner />;
  } else {
  if (invoices.length > 0) {
    invoiceItems = invoices.map(invoice => (
      <InvoiceItem key={invoice.Id} invoice={invoice} />
    ));
  } else {
    invoiceItems = <h4>No invoices found...</h4>;
  }
}

return (
  <div className="profiles">
    <div className="container">
      <div className="row">
        <div className="col-md-12">
          <h1 className="display-4 text-center">Invoices</h1>
          {invoiceItems}
        </div>
      </div>
    </div>
  </div>
  );
 }
}

Invoices.propTypes = {
 getInvoices: PropTypes.func.isRequired,
 invoice: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
 invoice: state.invoices
});


export default connect(
 mapStateToProps,
 { getInvoices }
)(Invoices);

InvoiceItem.js

export const GET_INVOICES = "GET_INVOICES";
export const GET_INVOICE = "GET_INVOICE";
export const DELETE_INVOICE = "DELETE_INVOICE";
export const INVOICES_LOADING = "INVOICES_LOADING";

import axios from "axios";
import { GET_INVOICES, DELETE_INVOICE, INVOICES_LOADING } from "./types";

// getInvoices is a large axios call that goes here. It works fine.
// Leaving it out in this example.

// Delete Invoice
export const deleteInvoice = invoice => dispatch => {
 console.log(invoice) // UNDEFINED
dispatch({
  type: DELETE_INVOICE,
  payload: invoice
});
};

// Invoices loading
export const setInvoicesLoading = () => {
 return {
  type: INVOICES_LOADING
 };
};

import {
 GET_INVOICES,
 DELETE_INVOICE,
 INVOICES_LOADING
 } from "../actions/types";

const initialState = {
invoices: [],
loading: false
};

 export default function(state = initialState, action) {
  switch (action.type) {
    case INVOICES_LOADING:
     return {
      ...state,
      loading: true
     };
   case GET_INVOICES:
     return {
     ...state,
     invoices: action.payload,
     loading: false
    };
   case DELETE_INVOICE:
    return invoices.filter(invoice => invoice.Id !== invoice);
    default:
    return state;
   }
  }

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { deleteInvoice } from "../../actions/invoiceActions";

class InvoiceItem extends Component {
 onDeleteClick(e) {
 this.props.deleteInvoice();
 }
 render() {
  const { invoice } = this.props;

    return (
     <div className="card card-body bg-light mb-3">
       <div className="row">
         <div className="col-lg-6 col-md-4 col-8">
           <h3>Invoice: {invoice.InvoiceNumber}</h3>
           <p>Client: {invoice.Contact.Name}</p>
           <button
            onClick={this.onDeleteClick.bind(this)}
            className="btn btn-danger">
            Remove
           </button>
      </div>
    </div>
  </div>
  );
  }
 }

 InvoiceItem.propTypes = {
 invoice: PropTypes.object.isRequired,
 deleteInvoice: PropTypes.func
 };

 const mapDispatchToProps = dispatch => {
   return {
     deleteInvoice: invoice => dispatch(deleteInvoice(invoice))
    };
  };

  export default connect(
   mapDispatchToProps,
   { deleteInvoice }
  )(InvoiceItem);

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import Spinner from "../common/Spinner";
import InvoiceItem from "./InvoiceItem";
import { getInvoices } from "../../actions/invoiceActions";

class Invoices extends Component {
  componentDidMount() {
  this.props.getInvoices();
}

render() {
  const { invoices, loading } = this.props.invoice;
  let invoiceItems;

  if (invoices === null || loading) {
   invoiceItems = <Spinner />;
  } else {
  if (invoices.length > 0) {
    invoiceItems = invoices.map(invoice => (
      <InvoiceItem key={invoice.Id} invoice={invoice} />
    ));
  } else {
    invoiceItems = <h4>No invoices found...</h4>;
  }
}

return (
  <div className="profiles">
    <div className="container">
      <div className="row">
        <div className="col-md-12">
          <h1 className="display-4 text-center">Invoices</h1>
          {invoiceItems}
        </div>
      </div>
    </div>
  </div>
  );
 }
}

Invoices.propTypes = {
 getInvoices: PropTypes.func.isRequired,
 invoice: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
 invoice: state.invoices
});


export default connect(
 mapStateToProps,
 { getInvoices }
)(Invoices);

import React，{Component}来自“React”；
从“道具类型”导入道具类型；
从“react redux”导入{connect}；
从“../../actions/invoiceActions”导入{deleteInvoice}”；
类InvoiceItem扩展组件{
单击（e）{
this.props.deleteInvoice（）；
}
render（）{
const{invoice}=this.props；
返回(
发票：{Invoice.InvoiceNumber}
客户端：{invoice.Contact.Name}
去除
);
}
}
InvoiceItem.propTypes={
发票：PropTypes.object.isRequired，
deleteInvoice:PropTypes.func
};
const mapDispatchToProps=调度=>{
返回{
删除发票：发票=>发货（删除发票（发票））
};
};
导出默认连接(
mapDispatchToProps，
{deleteInvoice}
)（发票项目）；

Invoices.js

export const GET_INVOICES = "GET_INVOICES";
export const GET_INVOICE = "GET_INVOICE";
export const DELETE_INVOICE = "DELETE_INVOICE";
export const INVOICES_LOADING = "INVOICES_LOADING";

import axios from "axios";
import { GET_INVOICES, DELETE_INVOICE, INVOICES_LOADING } from "./types";

// getInvoices is a large axios call that goes here. It works fine.
// Leaving it out in this example.

// Delete Invoice
export const deleteInvoice = invoice => dispatch => {
 console.log(invoice) // UNDEFINED
dispatch({
  type: DELETE_INVOICE,
  payload: invoice
});
};

// Invoices loading
export const setInvoicesLoading = () => {
 return {
  type: INVOICES_LOADING
 };
};

import {
 GET_INVOICES,
 DELETE_INVOICE,
 INVOICES_LOADING
 } from "../actions/types";

const initialState = {
invoices: [],
loading: false
};

 export default function(state = initialState, action) {
  switch (action.type) {
    case INVOICES_LOADING:
     return {
      ...state,
      loading: true
     };
   case GET_INVOICES:
     return {
     ...state,
     invoices: action.payload,
     loading: false
    };
   case DELETE_INVOICE:
    return invoices.filter(invoice => invoice.Id !== invoice);
    default:
    return state;
   }
  }

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { deleteInvoice } from "../../actions/invoiceActions";

class InvoiceItem extends Component {
 onDeleteClick(e) {
 this.props.deleteInvoice();
 }
 render() {
  const { invoice } = this.props;

    return (
     <div className="card card-body bg-light mb-3">
       <div className="row">
         <div className="col-lg-6 col-md-4 col-8">
           <h3>Invoice: {invoice.InvoiceNumber}</h3>
           <p>Client: {invoice.Contact.Name}</p>
           <button
            onClick={this.onDeleteClick.bind(this)}
            className="btn btn-danger">
            Remove
           </button>
      </div>
    </div>
  </div>
  );
  }
 }

 InvoiceItem.propTypes = {
 invoice: PropTypes.object.isRequired,
 deleteInvoice: PropTypes.func
 };

 const mapDispatchToProps = dispatch => {
   return {
     deleteInvoice: invoice => dispatch(deleteInvoice(invoice))
    };
  };

  export default connect(
   mapDispatchToProps,
   { deleteInvoice }
  )(InvoiceItem);

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import Spinner from "../common/Spinner";
import InvoiceItem from "./InvoiceItem";
import { getInvoices } from "../../actions/invoiceActions";

class Invoices extends Component {
  componentDidMount() {
  this.props.getInvoices();
}

render() {
  const { invoices, loading } = this.props.invoice;
  let invoiceItems;

  if (invoices === null || loading) {
   invoiceItems = <Spinner />;
  } else {
  if (invoices.length > 0) {
    invoiceItems = invoices.map(invoice => (
      <InvoiceItem key={invoice.Id} invoice={invoice} />
    ));
  } else {
    invoiceItems = <h4>No invoices found...</h4>;
  }
}

return (
  <div className="profiles">
    <div className="container">
      <div className="row">
        <div className="col-md-12">
          <h1 className="display-4 text-center">Invoices</h1>
          {invoiceItems}
        </div>
      </div>
    </div>
  </div>
  );
 }
}

Invoices.propTypes = {
 getInvoices: PropTypes.func.isRequired,
 invoice: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
 invoice: state.invoices
});


export default connect(
 mapStateToProps,
 { getInvoices }
)(Invoices);

import React，{Component}来自“React”；
从“react redux”导入{connect}；
从“道具类型”导入道具类型；
从“./common/Spinner”导入微调器；
从“/InvoiceItem”导入InvoiceItem；
从“../../actions/invoiceActions”导入{getInvoices}”；
类扩展组件{
componentDidMount（）{
this.props.getInvoices（）；
}
render（）{
const{invoices，loading}=this.props.invoice；
让我们开发票；
如果（发票===null | |加载）{
发票项目=；
}否则{
如果（发票长度>0）{
invoiceItems=发票.map（发票=>(
));
}否则{
invoiceItems=未找到发票。。。；
}
}
返回(
发票
{invoiceItems}
);
}
}
发票.propTypes={
getInvoices:PropTypes.func.isRequired，
发票：PropTypes.object.isRequired
};
常量mapStateToProps=状态=>({
发票：state.invoices
});
导出默认连接(
MapStateTops，
{getInvoices}
)（发票）；

删除发票

希望传入

发票

对象。由于您当前未传入任何内容，因此它会记录未定义的


onDeleteClick(e) {
   this.props.deleteInvoice(this.props.invoice);
}

啊，太谢谢你了！：）<代码>连接（空，mapDispatchToProps）（发票项）-