Redux 遵循的三个原则是什么？

回到关于应用程序开发的热潮刚刚开始的时候，前端很容易实现。然而，随着对最终用户体验的日益关注，开发前端前端的复杂性正在上升并变得势不可挡。

为了满足新时代用户的紧迫和不断变化的需求，前端开发人员使用 Vue 来帮助他们克服复杂性的困境。除此之外，Angular 和 React 也是可能的选择。然而，前端应用程序缺乏一致性，这使得 JavaScript 应用程序需要一个稳定的容器。因此，redux 的开发旨在帮助前端开发人员编写应用程序以获得一致的行为。除此之外，redux 还有助于解决 React 性能问题。因此，Redux 在不同环境（本地、服务器和客户端）中运行时是不变的。通常，Redux 与 React 一起使用以消除在大型应用程序中遇到的状态管理问题。此外，由于 React 与根组件紧密耦合，因此恢复组件很麻烦，因此 redux 有助于降低复杂性。除此之外，它还为构建易于测试的应用程序提供了全局可访问性。

如果您刚刚开始使用 redux 并想详细探索它，请先了解基础知识。

要想了解redux的核心，只需要知道三个原则。

1. Redux 是单一数据源：应用程序的全局状态存储在单个存储的对象树中。结果，由于服务器的状态被序列化到客户端而无需任何额外代码，因此构建通用应用程序变得更加容易。反过来，单个状态树使检查应用程序变得容易。除此之外，它还可以实现更快、更短的开发周期。此外，一些传统上难以实现的功能，例如撤消/重做，在状态位于单个树中时可能变得微不足道。
2. 状态是只读状态：只有一种方法可以改变状态——发出一个动作或一个对象来描述发生了什么。根据第二个原则，网络和视图回调都不会写入状态。取而代之的是，这些表达了形式转换的意图。由于所有这些更改都是集中的，并且这些更改只能以严格的顺序发生，因此无需寻找条件。由于动作是普通对象，因此可以对它们进行序列化、记录、存储，然后重放以进行调试或测试。
3. 使用纯函数完成修改：为了指定状态树如何通过操作进行转换，您可以编写纯 reducer。 reducer 只是纯函数，它采用先前的状态以及动作并将其移动到下一个状态。您应该记住，除了突变到最后一个状态之外，您应该返回到新的状态对象。首先，您应该从一个减速器开始。现在，当您的应用程序增长时，您可以将其拆分为小的 reducer，它们可以处理状态树的特定部分。由于 reducer 只是函数，因此您应该控制顺序，其中顺序可以变成可重用的 reducer，用于常见任务。

创建 React 应用程序以及安装模块：

第 1 步：最初，使用下面提到的命令创建一个 React 应用程序：

npx create-react-app Principle

第 2 步：使用适当的文件夹名称（原理）创建文件夹后，并使用以下命令进行操作：

cd Principle

第 3 步：创建 ReactJS 应用程序后，使用以下命令安装模块：

npm install

项目结构：它将如下所示：

示例：在下面的示例中，我们从数据层开始存储信息。根据第一个原则，Redux 是用于数据共享的单一存储。因此，我们将从创建一个用于存储的单例开始。根据第二个原理，纯函数具有可预测的特性。这些函数不会有任何数据库调用或网络调用。当我们使用相同的参数或参数集调用纯函数时，将返回相同的值。下面的代码是用App.js编写的。除此之外，我们将使用 React-Redux 将视图层连接到状态层。在下面的代码中，当用户触发一个动作时，之前的状态会改变，这意味着 on 将返回到新的状态。

App.js

import React from "react";
import { connect } from "react-redux";
  
const applyFilter = (searchFruite) => (article) => article
  .name.toLowerCase().includes(searchFruite.toLowerCase());
  
const App = ({ cricketerList, searchFruite, onSearch }) => (
  

    
      
Search your favourite cricketer
    
  
    

  
);
  
const Search = ({ value, onSearch, children }) => (
  

    {children}{" "}
     onSearch(event.target.value)}
      type="text"
    />
  
);
  
const UL = ({ list }) => (
  

    {list.map((cricketer) => (
      

        {cricketer.name}
      
    ))}
  
);
  
// Connecting view layer to state layer with react-redux
const mapStateToProps = (state) => ({
  cricketerList: state.cricketerState.cricketer,
  searchFruite: state.searchState.searchFruite,
});
  
const mapDispatchToProps = (dispatch) => ({
  onSearch: (searchFruite) =>
    dispatch({
      type: "SEARCH_SET",
      searchFruite,
    }),
});
  
export default connect(mapStateToProps, 
              mapDispatchToProps)(App);

根据原理，应用程序的整个状态都可以表示为一个统一的 JavaScript 对象。以下数据将存储在cricketerReducer.js 中。

cricketerReducer.js

const INITIAL_STATE = {
  cricketer: [
    { id: "0", name: "Rahul Sharma", type: "Spin Bolwer" },
    { id: "1", name: "Rahul Tewatia", type: "All-Rounder" },
    { id: "2", name: "Virat Kohli", type: "Batsman" },
    { id: "3", name: "Suresh Raina", type: "Batsman" },
    { id: "4", name: "KL Rahul", type: "Batsman - WK" },
    { id: "5", name: "Rohit Sharma", type: "Batsman" },
    { id: "6", name: "Deepak Chahar", type: "Fast Bowler" },
    { id: "7", name: "Ms Dhoni", type: "Batsman-WK" },
    { id: "8", name: "Ravindra Jadeja", type: "All-Rounder" },
    { id: "9", name: "Shardul Thakur", type: "Fast Bowler" },
    { id: "10", name: "Kuldip Yadav", type: "Spin Bowler" },
    { id: "11", name: "Sachin Tendulkar", type: "Batsman" },
  ],
};
  
function cricketerReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    default:
      return state;
  }
}
  
export default cricketerReducer;

减速器2.js

const INITIAL_STATE = {
  searchFruite: "",
};
  
function searchReducer(state = INITIAL_STATE, action) {
  switch (action.type) {
    case "SEARCH_SET":
      return { ...state, searchFruite: action.searchFruite };
    default:
      return state;
  }
}
  
export default searchReducer;

运行应用程序的步骤：打开终端并键入以下命令。

npm start

输出：打开浏览器并移动到http://localhost:3000/以查看以下输出。