ReactJS - 列表支出

開啟 ExpenseEntryItemList.js 並從 redux 庫匯入 connect。

import { connect } from 'react-redux';

接下來，匯入 addExpenseList 和 deleteExpense actions。

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

接下來，使用 props 新增建構函式。

constructor(props) { 
   super(props); 
}

接下來，在 componentDidMount() 生命週期中呼叫 getExpenseList。

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

接下來，編寫一個方法來處理刪除支出選項。

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 屬性，並將排程器 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 命令啟動應用程式。

npm start

接下來，開啟瀏覽器並在位址列中輸入 https://:3000 並按回車鍵。