ReactJS - list expenses

---

---

打开 ExpenseEntryItemList.js 并从 redux 库导入 connect。

 import { connect } from 'react-redux';

接下来，导入 addExpenseList 和 deleteExpense 操作。

 import { getExpenseList, deleteExpense } from '../actions/expenseActions';

接下来，添加带有 props 的构造函数。

constructor(props) {	
	 	super(props);	
}

接下来，在 componentDidMount（） 生命周期中调用 getExpenseList。

componentDidMount() {	
	 	this.props.getExpenseList();	
}

接下来，编写一个方法来处理 remove expense 选项。

handleDelete = (id,e) => {	
	 	e.preventDefault();	
	 	this.props.deleteExpense(id);	
}

现在，让我们编写一个函数 getTotal 来计算总费用。

getTotal() {
	 	let total = 0;
	 	if (this.props.expenses != null) {
	 	 	 for (var i = 0; i < this.props.expenses.length; i++) {
	 	 	 	 	total += this.props.expenses[i].amount
	 	 	 }
	 	}
	 	return total;
}

接下来，更新 render 方法并列出费用项目。

render() {
	 	let lists = [];

	 	if (this.props.expenses != null) {
	 	 	 lists = this.props.expenses.map((item) =>
	 	 	 	 	<tr key={item.id}>
	 	 	 	 	 	 <td>{item.name}</td>
	 	 	 	 	 	 <td>{item.amount}</td>
	 	 	 	 	 	 <td>{new Date(item.spendDate).toDateString()}</td>
	 	 	 	 	 	 <td>{item.category}</td>
	 	 	 	 	 	 <td><a href="#"
	 	 	 	 	 	 	 	onClick={(e) => this.handleDelete(item.id, e)}>Remove</a></td>
	 	 	 	 	</tr>
	 	 	 );
	 	}
	 	return (
	 	 	 <div>
	 	 	 	 	<table>
	 	 	 	 	 	 <thead>
	 	 	 	 	 	 	 	<tr>
	 	 	 	 	 	 	 	 	 <th>Item</th>
	 	 	 	 	 	 	 	 	 <th>Amount</th>
	 	 	 	 	 	 	 	 	 <th>Date</th>
	 	 	 	 	 	 	 	 	 <th>Category</th>
	 	 	 	 	 	 	 	 	 <th>Remove</th>
	 	 	 	 	 	 	 	</tr>
	 	 	 	 	 	 </thead>
	 	 	 	 	 	 <tbody>
	 	 	 	 	 	 	 	{lists}
	 	 	 	 	 	 	 	<tr>
	 	 	 	 	 	 	 	 	 <td colSpan="1" style={{ textAlign: "right" }}>Total Amount</td>
	 	 	 	 	 	 	 	 	 <td colSpan="4" style={{ textAlign: "left" }}>
	 	 	 	 	 	 	 	 	 	 	{this.getTotal()}
	 	 	 	 	 	 	 	 	 </td>
	 	 	 	 	 	 	 	</tr>
	 	 	 	 	 	 </tbody>
	 	 	 	 	</table>
	 	 	 </div>
	 	);
}

接下来，编写 mapStateToProps 和 mapDispatchToProps 方法。

const mapStateToProps = state => {
	 	return { 	 	 	
	 	 	 expenses: state.data
	 	};
};
const mapDispatchToProps = {
	 	getExpenseList,
	 	deleteExpense
};

在这里，我们已将 redux store 中的 expenses 项映射到 expenses 属性，并将 distpatcher、getExpenseList 和 deleteExpense 附加到组件属性。

最后，使用 connect api 将组件连接到 Redux store。

export default connect(
	 	mapStateToProps,
	 	mapDispatchToProps
)(ExpenseEntryItemList);

应用程序的完整源代码如下 -

import React from "react";
import { connect } from 'react-redux';
import { getExpenseList, deleteExpense } from '../actions/expenseActions';

class ExpenseEntryItemList extends React.Component {
	 	constructor(props) {
	 	 	 super(props);
	 	}
	 	componentDidMount() {
	 	 	 this.props.getExpenseList();
	 	}
	 	handleDelete = (id, e) => {
	 	 	 e.preventDefault();
	 	 	 this.props.deleteExpense(id);
	 	}
	 	getTotal() {
	 	 	 let total = 0;
	 	 	 if (this.props.expenses != null) {
	 	 	 	 	for (var i = 0; i < this.props.expenses.length; i++) {
	 	 	 	 	 	 total += this.props.expenses[i].amount
	 	 	 	 	}
	 	 	 }
	 	 	 return total;
	 	}
	 	render() {
	 	 	 let lists = [];
	 	 	 if (this.props.expenses != null) {
	 	 	 	 	lists = this.props.expenses.map((item) =>
	 	 	 	 	 	 <tr key={item.id}>
	 	 	 	 	 	 	 	<td>{item.name}</td>
	 	 	 	 	 	 	 	<td>{item.amount}</td>
	 	 	 	 	 	 	 	<td>{new Date(item.spendDate).toDateString()}</td>
	 	 	 	 	 	 	 	<td>{item.category}</td>
	 	 	 	 	 	 	 	<td><a href="#"
	 	 	 	 	 	 	 	 	 onClick={(e) => this.handleDelete(item.id, e)}>Remove</a>
	 	 	 	 	 	 	 	</td>
	 	 	 	 	 	 </tr>
	 	 	 	 	);
	 	 	 }
	 	 	 return (
	 	 	 	 	<div>
	 	 	 	 	 	 <table>
	 	 	 	 	 	 	 	<thead>
	 	 	 	 	 	 	 	 	 <tr>
	 	 	 	 	 	 	 	 	 	 	<th>Item</th>
	 	 	 	 	 	 	 	 	 	 	<th>Amount</th>
	 	 	 	 	 	 	 	 	 	 	<th>Date</th>
	 	 	 	 	 	 	 	 	 	 	<th>Category</th>
	 	 	 	 	 	 	 	 	 	 	<th>Remove</th>
	 	 	 	 	 	 	 	 	 </tr>
	 	 	 	 	 	 	 	</thead>
	 	 	 	 	 	 	 	<tbody>
	 	 	 	 	 	 	 	 	 {lists}
	 	 	 	 	 	 	 	 	 <tr>
	 	 	 	 	 	 	 	 	 	 	<td colSpan="1" style={{ textAlign: "right" }}>Total Amount</td>
	 	 	 	 	 	 	 	 	 	 	<td colSpan="4" style={{ textAlign: "left" }}>
	 	 	 	 	 	 	 	 	 	 	 	 {this.getTotal()}
	 	 	 	 	 	 	 	 	 	 	</td>
	 	 	 	 	 	 	 	 	 </tr>
	 	 	 	 	 	 	 	</tbody>
	 	 	 	 	 	 </table>
	 	 	 	 	</div>
	 	 	 );
	 	}
}
const mapStateToProps = state => {
	 	return {
	 	 	 expenses: state.data
	 	};
};
const mapDispatchToProps = {
	 	getExpenseList,
	 	deleteExpense
};
export default connect(
	 	mapStateToProps,
	 	mapDispatchToProps
)(ExpenseEntryItemList);

接下来，使用 npm 命令为应用程序提供服务。

接下来，打开浏览器并在地址栏中输入 http://localhost:3000，然后按 Enter。