REDUX的解释
让我们想象您正在与一群人一起玩游戏。在游戏中，您需要许多不同的东西来跟踪收集的要点，上力和物品。
如果您想记住所有这些东西，那么很难跟踪一切。您可能会忘记一些重要的事情或感到困惑。
redux就像游戏的记分牌。它可以跟踪您需要记住的所有不同事物，以便您可以轻松地看到您有多少要点，收集到的力量以及仍然需要找到的物品。
就像计分板如何帮助您跟踪游戏中的所有内容一样，Redux可以帮助您跟踪应用程序或网站中的所有内容。
它将您的所有数据组织在一个地方，以便您可以轻松访问它并在需要时进行更改。
就像如何将记分牌用于任何游戏一样，Redux可以与任何应用程序或网站一起使用，而不仅仅是游戏。这就是为什么它如此受欢迎和有用！
简要说明Redux的关键原则
REDUX的关键原理是：
-
商店：这就像一个计分板，所有信息都存储了。
-
操作：这些就像您发送到程序的消息一样，告诉执行某个功能。例如，“获取特定数据”。
-
还原器：这些就像知道如何更改
的帮助者 计分板基于您发送的消息。
例如，如果您发送消息“将新项目添加到记分板！”还原器知道如何将新项目放在记分牌中。
- 选择器：这些就像帮助者可以帮助您在记分牌中找到所需的东西。
例如，如果您想找到特定的项目，则选择器可以帮助您快速找到它们。
REDUX原则
- Store ：商店是保留Redux应用程序所有数据的中心地点。就像一个大容器一样，它包含有关应用程序中发生的一切信息。
这使得可以轻松跟踪正在发生的事情，并在需要时轻松访问开发人员。
- 操作：操作是发送到商店以更新其中的数据的消息。他们描述了应用程序中发生的事情，例如单击一个按钮或提交表格。
派遣操作时，它会触发商店的更改。例如，如果在线购物网站上单击“添加到购物车”按钮，则可能会派遣操作以将项目添加到购物车中。
- 还原器：还原器是处理由动作触发的商店变化的函数。他们采取了商店的当前状态以及派遣的行动，然后返回一个反映所做变化的新状态。
例如，如果派遣操作将项目添加到购物车中，则还原器将采用购物车的当前状态并向其添加新项目。
- 选择器：选择器是从商店中提取数据的功能。他们采用商店的当前状态，并返回应用程序所需的特定数据。
例如，可以使用选择器来提取购物车中所有物品的总价格。
一起，这四个原则构成了Redux的基础，并使其成为管理复杂应用程序状态的强大工具。
通过将所有数据保持在一个位置，并使用操作，还原器和选择器来管理它，Redux可以轻松跟踪应用程序中的情况并在需要时访问数据。
在React应用程序中设置Redux
1.安装必要的软件包（redux，react-redux）
redux
Redux软件包是Redux的核心包。它提供了创建Redux商店，派遣操作和处理状态变化的构建块。要安装Redux，请打开您的终端并运行以下命令：
//for npm users
npm install redux
//for yarn users
yarn add redux
React-Redux
React-Redux软件包提供了React和Redux之间的绑定。它使您可以将React组件连接到Redux Store并访问商店的状态和调度方法。要安装React-Redux，请运行以下命令：
//for npm users
npm install react-redux
//for yarn users
yarn add react-redux
2.创建Redux Store并以初始状态初始化它
您在React应用程序中安装了Redux的必要软件包后，下一步就是创建Redux Store。
商店是您的Redux应用程序的中心枢纽，负责管理您的应用程序的状态
要创建一个redux商店，我们需要从redux软件包导入createStore函数。此功能负责创建新的Redux Store实例。
import { createStore } from 'redux';
下一步是创建一个还原函数。还原器是将当前状态和动作作为参数并返回新状态的纯函数。
还原器负责处理Redux应用程序中的状态变化。
这是还原函数的示例：
const initialState = { count: 0 };
const counterReducer = (state = initialState, action) => {
switch (action. Type) {
case 'INCREMENT':
return { ...state, count: state. Count + 1 };
case 'DECREMENT':
return { ...state, count: state. Count - 1 };
default:
return state;
}
};
在上面的示例中，我们正在创建一个称为counterReducer的还原函数。 initialState对象包含我们应用程序的初始状态，并将count属性设置为0。
还原功能需要两个参数：state和action。如果没有传递状态（即，在第一个调用降低器中），则使用初始状态。
还原函数使用switch语句来确定如何处理每个动作。
在此示例中，我们正在处理两个动作：INCREMENT和DECREMENT。派遣INCREMENT操作时，我们创建一个新状态对象，计数属性增加了1。
同样，当派遣DECREMENT操作时，我们创建一个新状态对象，其计数属性降低了1。如果未识别操作类型，则返回了当前状态。
3.使用createStore函数用还原和初始状态创建商店
现在我们创建了还原函数，我们可以使用createStore函数创建一个新的redux商店实例。
我们将作为第一个参数传递我们的还原功能，而我们的初始状态作为第二个参数。
const store = createStore(counterReducer, initialState);
这将创建一个新的Redux Store实例，我们的反换回功能作为还原器，而我们的初始状态对象作为初始状态。
4.创建动作和动作创建者以更新商店
创建一组动作类型作为常数
在Redux中创建操作的第一步是将一组动作类型定义为常数。动作类型是描述要执行的动作类型的字符串常数。
将其派往商店时用于识别该动作。
这是将一组动作类型定义为常数的一个示例：
export const INCREMENT_COUNT = 'INCREMENT_COUNT';
export const DECREMENT_COUNT = 'DECREMENT_COUNT';
创建动作创建者功能以创建每种类型的动作
下一步是创建Action Creator功能。动作创建者是创建特定类型的动作的函数。他们将任何必要的数据作为参数，然后返回操作对象。
这是为我们的INCREMENT_COUNT和DECREMENT_COUNT Action创建动作创建器函数的一个示例：
export function incrementCount() {
return { type: INCREMENT_COUNT };
}
export function decrementCount() {
return { type: DECREMENT_COUNT };
}
在上面的示例中，我们正在创建两个动作创建器函数：incrementCount()和decrementCount()。每个功能都将设置为相应的动作类型常数的type属性返回一个动作对象。
5.派遣动作以更新商店
我们已经创建了动作类型和动作创建者，我们可以派遣它们以更新商店。我们需要使用Redux Store提供的dispatch()功能来派遣我们的操作。
这是派遣我们的incrementCount()和decrementCount()动作的示例：
//importing from the action file
import { incrementCount, decrementCount } from './actions';
store. Dispatch(incrementCount());
store.dispatch(decrementCount());
在上面的示例中，我们正在从称为actions.js的文件中导入动作创建者函数。
然后，我们使用Redux Store提供的dispatch()功能将incrementCount()和decrementCount()动作派遣到商店。
第二部分将很快出版。
请继续关注