ReactJS - Redux

React Redux 是一个用于 React 的高级状态管理库。正如我们之前学到的，React 只支持组件级别状态管理。在一个大型复杂的应用程序中，使用了大量的组件。React 建议将状态移到顶级组件，并使用属性将状态传递给嵌套组件。这在某种程度上有所帮助，但当组件数量增加时，它会变得复杂。

React Redux 介入并帮助在应用程序级别维护状态。React Redux 允许任何组件随时访问状态。此外，它还允许任何组件随时更改应用程序的状态。

让我们学习如何在本章中使用 React Redux 来编写 React 应用程序。

概念

React Redux 将应用程序的状态保存在一个名为 Redux store 的单一位置。React 组件可以从 store 获取最新状态，也可以随时更改状态。Redux 提供了一个简单的流程来获取和设置应用程序的当前状态，并涉及以下概念。

Store - 存储应用程序状态的中心位置。

Actions - Action 是一个简单的对象，包含要执行的动作类型和执行动作所需的输入（称为 payload）。例如，在 store 中添加项目的 action 包含类型为 ADD_ITEM 和一个包含项目详细信息的对象作为 payload。Action 可以表示为：

{ 
   type: 'ADD_ITEM', 
   payload: { name: '..', ... }
}

Reducers - Reducers 是纯函数，用于根据现有状态和当前 action 创建新状态。它返回新创建的状态。例如，在添加项目的情况下，它创建一个新的项目列表，并将状态中的项目和新项目合并，然后返回新创建的列表。

Action creators - Action creator 创建具有适当动作类型和动作所需数据的 action 并返回该 action。例如，addItem action creator 返回以下对象：

{ 
   type: 'ADD_ITEM', 
   payload: { name: '..', ... }
}

Component - 组件可以连接到 store 以获取当前状态，并向 store 分派 action，以便 store 执行 action 并更新其当前状态。

典型 Redux store 的工作流程如下图所示。

React 组件订阅 store，并在应用程序初始化期间获取最新状态。
要更改状态，React 组件创建必要的 action 并分派该 action。
Reducer 根据 action 创建新状态并返回它。Store 使用新状态更新自身。
状态更改后，store 将更新后的状态发送到所有已订阅的组件。

Redux API

Redux 提供单个 API，connect，它将组件连接到 store，并允许组件获取和设置 store 的状态。

connect API 的签名是：

function connect(mapStateToProps?, mapDispatchToProps?, mergeProps?, options?)

所有参数都是可选的，它返回一个 HOC（高阶组件）。高阶组件是一个包装组件并返回新组件的函数。

let hoc = connect(mapStateToProps, mapDispatchToProps) 
let connectedComponent = hoc(component)

让我们看看前两个参数，对于大多数情况来说，它们就足够了。

mapStateToProps - 接受具有以下签名的函数。

(state, ownProps?) => Object

这里，state 指的是 store 的当前状态，Object 指的是组件的新 props。每当 store 的状态更新时，它都会被调用。

(state) => { prop1: this.state.anyvalue }

mapDispatchToProps - 接受具有以下签名的函数。

Object | (dispatch, ownProps?) => Object

这里，dispatch 指的是用于在 redux store 中分派 action 的 dispatch 对象，Object 指的是组件的一个或多个 dispatch 函数作为 props。

(dispatch) => {
   addDispatcher: (dispatch) => dispatch({ type: 'ADD_ITEM', payload: { } }),
   removeispatcher: (dispatch) => dispatch({ type: 'REMOVE_ITEM', payload: { } }),
}

Provider 组件

React Redux 提供了一个 Provider 组件，其唯一目的是使 Redux store 可用于所有使用 connect API 连接到 store 的嵌套组件。示例代码如下：

import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { App } from './App'
import createStore from './createReduxStore'

const store = createStore()

ReactDOM.render(
   <Provider store={store}>
      <App />
   </Provider>,
   document.getElementById('root')
)

现在，App 组件内的所有组件都可以使用 connect API 访问 Redux store。

工作示例

让我们重新创建我们的 expense manager 应用程序，并使用 React Redux 概念来维护应用程序的状态。

首先，使用 Create React App 或 Rollup bundler 创建一个新的 React 应用程序，react-message-app，方法是按照“创建 React 应用程序”一章中的说明进行操作。

接下来，安装 Redux 和 React Redux 库。

npm install redux react-redux --save

接下来，安装 uuid 库以生成新费用的唯一标识符。

npm install uuid --save

接下来，在您最喜欢的编辑器中打开应用程序。

接下来，在应用程序的根目录下创建 src 文件夹。

接下来，在 src 文件夹下创建 actions 文件夹。

接下来，在 src/actions 文件夹下创建一个文件，types.js，并开始编辑。

接下来，添加两种 action 类型，一种用于添加支出，另一种用于删除支出。

export const ADD_EXPENSE = 'ADD_EXPENSE'; 
export const DELETE_EXPENSE = 'DELETE_EXPENSE';

接下来，在 src/actions 文件夹下创建一个文件，index.js，以添加 action 并开始编辑。

接下来，导入 uuid 来创建唯一标识符。

import { v4 as uuidv4 } from 'uuid';

接下来，导入 action 类型。

import { ADD_EXPENSE, DELETE_EXPENSE } from './types';

接下来，添加一个新函数以返回用于添加支出的 action 类型并将其导出。

export const addExpense = ({ name, amount, spendDate, category }) => ({
   type: ADD_EXPENSE,
   payload: {
      id: uuidv4(),
      name,
      amount,
      spendDate,
      category
   }
});

这里，该函数期望 expense 对象并返回类型为 ADD_EXPENSE 的 action 类型以及 expense 信息的 payload。

接下来，添加一个新函数以返回用于删除支出的 action 类型并将其导出。

export const deleteExpense = id => ({
   type: DELETE_EXPENSE,
   payload: {
      id
   }
});

这里，该函数期望要删除的支出项目的 id，并返回类型为 'DELETE_EXPENSE' 的 action 类型以及支出 id 的 payload。

action 的完整源代码如下：

import { v4 as uuidv4 } from 'uuid';
import { ADD_EXPENSE, DELETE_EXPENSE } from './types';

export const addExpense = ({ name, amount, spendDate, category }) => ({
   type: ADD_EXPENSE,
   payload: {
      id: uuidv4(),
      name,
      amount,
      spendDate,
      category
   }
});
export const deleteExpense = id => ({
   type: DELETE_EXPENSE,
   payload: {
      id
   }
});

接下来，在 src 文件夹下创建一个名为 reducers 的新文件夹。

接下来，在 src/reducers 文件夹下创建一个文件，index.js，以编写 reducer 函数并开始编辑。

接下来，导入 action 类型。

import { ADD_EXPENSE, DELETE_EXPENSE } from '../actions/types';

接下来，添加一个函数，expensesReducer，以执行在 redux store 中添加和更新支出的实际功能。

export default function expensesReducer(state = [], action) {
   switch (action.type) {
      case ADD_EXPENSE:
         return [...state, action.payload];
      case DELETE_EXPENSE:
         return state.filter(expense => expense.id !== action.payload.id);
      default:
         return state;
   }
}

reducer 的完整源代码如下：

import { ADD_EXPENSE, DELETE_EXPENSE } from '../actions/types';

export default function expensesReducer(state = [], action) {
   switch (action.type) {
      case ADD_EXPENSE:
         return [...state, action.payload];
      case DELETE_EXPENSE:
         return state.filter(expense => expense.id !== action.payload.id);
      default:
         return state;
   }
}

这里，reducer 检查 action 类型并执行相关代码。

接下来，在 src 文件夹下创建 components 文件夹。

接下来，在 src/components 文件夹下创建一个文件，ExpenseEntryItemList.css，并为 html 表格添加通用样式。

html {
   font-family: sans-serif;
}
table {
   border-collapse: collapse;
   border: 2px solid rgb(200,200,200);
   letter-spacing: 1px;
   font-size: 0.8rem;
}
td, th {
   border: 1px solid rgb(190,190,190);
   padding: 10px 20px;
}
th {
   background-color: rgb(235,235,235);
}
td, th {
   text-align: left;
}
tr:nth-child(even) td {
   background-color: rgb(250,250,250);
}
tr:nth-child(odd) td {
   background-color: rgb(245,245,245);
}
caption {
   padding: 10px;
}
tr.highlight td { 
   background-color: #a6a8bd;
}

接下来，在 src/components 文件夹下创建一个文件，ExpenseEntryItemList.js，并开始编辑。

接下来，导入 React 和 React Redux 库。

import React from 'react'; 
import { connect } from 'react-redux';

接下来，导入 ExpenseEntryItemList.css 文件。

import './ExpenseEntryItemList.css';

接下来，导入 action creators。

import { deleteExpense } from '../actions'; 
import { addExpense } from '../actions';

接下来，创建一个类，ExpenseEntryItemList，并使用 props 调用构造函数。

class ExpenseEntryItemList extends React.Component {
   constructor(props) {
      super(props);
   }
}

接下来，创建 mapStateToProps 函数。

const mapStateToProps = state => {
   return {
      expenses: state
   };
};

在这里，我们将输入状态复制到组件的 expenses props 中。

接下来，创建 mapDispatchToProps 函数。

const mapDispatchToProps = dispatch => {
   return {
      onAddExpense: expense => {
         dispatch(addExpense(expense));
      },
      onDelete: id => {
         dispatch(deleteExpense(id));
      }
   };
};

在这里，我们创建了两个函数，一个用于分派 add expense (addExpense) 函数，另一个用于分派 delete expense (deleteExpense) 函数，并将这些函数映射到组件的 props 中。

接下来，使用 connect api 导出组件。

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

现在，组件获得三个新的属性，如下所示：

expenses - 支出列表
onAddExpense - 用于分派 addExpense 函数的函数
onDelete - 用于分派 deleteExpense 函数的函数

接下来，使用 onAddExpense 属性在构造函数中向 redux store 添加一些支出。

if (this.props.expenses.length == 0)
{
   const items = [
      { id: 1, name: "Pizza", amount: 80, spendDate: "2020-10-10", category: "Food" },
      { id: 2, name: "Grape Juice", amount: 30, spendDate: "2020-10-12", category: "Food" },
      { id: 3, name: "Cinema", amount: 210, spendDate: "2020-10-16", category: "Entertainment" },
      { id: 4, name: "Java Programming book", amount: 242, spendDate: "2020-10-15", category: "Academic" },
      { id: 5, name: "Mango Juice", amount: 35, spendDate: "2020-10-16", category: "Food" },
      { id: 6, name: "Dress", amount: 2000, spendDate: "2020-10-25", category: "Cloth" },
      { id: 7, name: "Tour", amount: 2555, spendDate: "2020-10-29", category: "Entertainment" },
      { id: 8, name: "Meals", amount: 300, spendDate: "2020-10-30", category: "Food" },
      { id: 9, name: "Mobile", amount: 3500, spendDate: "2020-11-02", category: "Gadgets" },
      { id: 10, name: "Exam Fees", amount: 1245, spendDate: "2020-11-04", category: "Academic" }
   ]
   items.forEach((item) => {
      this.props.onAddExpense(
         { 
            name: item.name, 
            amount: item.amount, 
            spendDate: item.spendDate, 
            category: item.category 
         }
      );
   })
}

接下来，添加一个事件处理程序以使用支出 id 删除支出项目。

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

在这里，事件处理程序调用 onDelete 分派器，它与支出 id 一起调用 deleteExpense。

接下来，添加一个方法来计算所有支出的总金额。

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

接下来，添加 render() 方法，并以表格格式列出支出项目。

render() {
   const 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>
   );
}

这里，我们将事件处理程序handleDelete设置为从存储中移除费用。

下面给出了ExpenseEntryItemList组件的完整源代码：

import React from 'react';
import { connect } from 'react-redux';
import './ExpenseEntryItemList.css';
import { deleteExpense } from '../actions';
import { addExpense } from '../actions';

class ExpenseEntryItemList extends React.Component {
   constructor(props) {
      super(props);

      if (this.props.expenses.length == 0){
         const items = [
            { id: 1, name: "Pizza", amount: 80, spendDate: "2020-10-10", category: "Food" },
            { id: 2, name: "Grape Juice", amount: 30, spendDate: "2020-10-12", category: "Food" },
            { id: 3, name: "Cinema", amount: 210, spendDate: "2020-10-16", category: "Entertainment" },
            { id: 4, name: "Java Programming book", amount: 242, spendDate: "2020-10-15", category: "Academic" },
            { id: 5, name: "Mango Juice", amount: 35, spendDate: "2020-10-16", category: "Food" },
            { id: 6, name: "Dress", amount: 2000, spendDate: "2020-10-25", category: "Cloth" },
            { id: 7, name: "Tour", amount: 2555, spendDate: "2020-10-29", category: "Entertainment" },
            { id: 8, name: "Meals", amount: 300, spendDate: "2020-10-30", category: "Food" },
            { id: 9, name: "Mobile", amount: 3500, spendDate: "2020-11-02", category: "Gadgets" },
            { id: 10, name: "Exam Fees", amount: 1245, spendDate: "2020-11-04", category: "Academic" }
         ]
         items.forEach((item) => {
            this.props.onAddExpense(
               { 
                  name: item.name, 
                  amount: item.amount, 
                  spendDate: item.spendDate, 
                  category: item.category 
               }
            );
         })
      }
   }
   handleDelete = (id,e) => {
      e.preventDefault();
      this.props.onDelete(id);
   }
   getTotal() {
      let total = 0;
      for (var i = 0; i < this.props.expenses.length; i++) {
         total += this.props.expenses[i].amount
      }
      return total;
   }
   render() {
      const 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
   };
};
const mapDispatchToProps = dispatch => {
   return {
      onAddExpense: expense => {
         dispatch(addExpense(expense));
      },
      onDelete: id => {
         dispatch(deleteExpense(id));
      }
   };
};
export default connect(
   mapStateToProps,
   mapDispatchToProps
)(ExpenseEntryItemList);

接下来，在src/components文件夹下创建一个文件App.js，并使用ExpenseEntryItemList组件。

import React, { Component } from 'react';
import ExpenseEntryItemList from './ExpenseEntryItemList';

class App extends Component {
   render() {
      return (
         <div>
            <ExpenseEntryItemList />
         </div>
      );
   }
}
export default App;

接下来，在src文件夹下创建一个文件index.js。

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import rootReducer from './reducers';
import App from './components/App';

const store = createStore(rootReducer);

ReactDOM.render(
   <Provider store={store}>
      <App />
   </Provider>,
   document.getElementById('root')
);

这里，

使用createStore创建一个存储，并附加我们的reducer。
使用React redux库中的Provider组件并将store设置为props，这使得所有嵌套组件都可以使用connect api连接到store。

最后，在根文件夹下创建一个public文件夹，并在其中创建一个index.html文件。

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>React Containment App</title>
   </head>
   <body>
      <div id="root"></div>
      <script type="text/JavaScript" src="./index.js"></script>
   </body>
</html>

接下来，使用npm命令启动应用程序。

npm start

接下来，打开浏览器并在地址栏中输入https://127.0.0.1:3000，然后按回车键。

点击移除链接将从redux存储中移除该项目。

打印页面