redux 生命周期_响应redux生命周期，使您的应用逻辑更可预测且更易于理解

redux 生命周期

React is one of the most used open-source JavaScript library for building user interfaces or UI components in the Modern World. React has many interesting features compare to other frontend development libraries. React also has good support for third-party libraries which helps to do the work easily and accurately. Redux is the library which has huge popularity among the react community. Redux is the state management library used in the react. Redux helps to create complex applications easier. Redux is not explicitly designed to work with react. Redux can be used for other Front ends Libraries which use by the Developers. But the React and the Redux is one of the best Combination.

React是用于在现代世界中构建用户界面或UI组件的最常用的开源JavaScript库之一。 与其他前端开发库相比，React具有许多有趣的功能。 React还对第三方库提供了良好的支持，这有助于轻松，准确地完成工作。 Redux是在React社区中非常受欢迎的图书馆。 Redux是React中使用的状态管理库。 Redux有助于更轻松地创建复杂的应用程序。 Redux没有明确设计为与react一起使用。 Redux可以用于开发人员使用的其他前端库。 但是React和Redux是最好的组合之一。

src: https://images.app.goo.gl/dsrBqUtRgAep1Lx37

src： https ： //images.app.goo.gl/dsrBqUtRgAep1Lx37

It is not suitable to use Redux at every React App. Redux should add when it needs Only. Some situations can add redux to the react app. A reasonable amount of data changing over time, Need to maintain a single source of truth for your state and need to keep all states in a top-level component is no longer sufficient are some situations that you should use Redux in react. Redux has a difficult curve to understand at the start. But after you understand the redux well, then you can build any type of react app easily. Let’s understand about redux life cycle from a real-world situation. Then I will assign them to the redux Life cycle steps.

不适合在每个React App上使用Redux。 Redux应该仅在需要时添加。 在某些情况下，可以将redux添加到react应用。 在某些情况下，您应该使用Redux进行响应，因此，随着时间的推移会发生合理数量的数据更改，仅需要为您的状态维护一个真实的数据源，并且将所有状态保持在顶级组件中已不再足够。 Redux一开始很难理解。 但是，当您对Redux有了很好的了解之后，便可以轻松构建任何类型的React应用。 让我们从实际情况中了解Redux生命周期。 然后，将它们分配给redux生命周期步骤。

src: https://images.app.goo.gl/xo12mzdemv1b2HbK9

src： https ： //images.app.goo.gl/xo12mzdemv1b2HbK9

Let’s talk about a simple create an account in a bank by submitting the form into the counter. There are different types of accounts in the bank called Savings Account, Current Account, Foreign Account and Joined Account. So the user needs to submit the form according to the type of the Account. There are many Departments in the Bank. Accounting, Human Resource, IT, Marketing are some of the familiar Departments that can be seen on the Bank. They need to Process the User details submitted through the form according to their need. Some Details do not need them. So need to check about the details and need to update their data according to the new details. Departments can ignore the user data if they are not needed to their department. When the Customer submits the details form to the Counter of the bank, Counterperson sends the copy of the data of the customer to each department to process. There is the main database for the bank to save all data. So after any given time any process come to the department, the department needs to process the data and send back to the main database. This can access the Higher Management team to check any data. So it helps to Higher Management team to check in the main database to find any data without asking about the data from the departments.

让我们讨论一下通过将表格提交到柜台来在银行中简单创建一个帐户。 银行中有不同类型的帐户，称为储蓄帐户，活期帐户，外国帐户和联合帐户。 因此，用户需要根据帐户类型提交表单。 银行有很多部门。 会计，人力资源，IT，市场营销是世行可以看到的一些熟悉的部门。 他们需要根据需要处理通过表单提交的用户详细信息。 一些详细信息不需要它们。 因此需要检查细节，并需要根据新细节更新其数据。 如果部门不需要他们，部门可以忽略用户数据。 当客户向银行柜台提交详细信息表格时，柜台人员会将客户数据的副本发送给每个部门进行处理。 银行有用于保存所有数据的主数据库。 因此，在任何给定时间到达部门后，部门需要处理数据并将其发送回主数据库。 这样可以访问高级管理团队以检查任何数据。 因此，这有助于高级管理团队在不询问部门数据的情况下检入主数据库以查找任何数据。

I think now you have a good understanding of the Simple scenario in the Bank. Let’s connect each of these steps to Redux Life Cycle.

我认为您现在已经对银行的“简单”方案有了很好的了解。 让我们将所有这些步骤连接到Redux Life Cycle。

Redux生命周期 (Redux Life Cycle)

src: https://images.app.goo.gl/xo12mzdemv1b2HbK9

src： https ： //images.app.goo.gl/xo12mzdemv1b2HbK9

Redux Architecture revolves around strict Unidirectional Data Flow. This helps to make the logic of the app easier to understand and More Predictable. It also helps to data normalization, so that you don’t end up with multiple, independent copies of the same data that are unaware of one another. Lets Connect bank Scenario to the Redux Life Cycle Steps.

Redux架构围绕严格的单向数据流展开。 这有助于使应用程序的逻辑更易于理解和可预测。 它还有助于数据规范化，这样您就不会得到彼此不知道的同一数据的多个独立副本。 让我们将银行方案连接到Redux生命周期步骤。

Action Creator — The customer who submits the Detail form act as the Action centre of the Redux.

动作创建者—提交“详细信息”表单的客户充当Redux的动作中心。

Action — The submitted detail form according to the type of the Account consider as the Action. User details in the form can consider as the payload of the action and the type of the form can consider the type of action in the redux.

行动-根据帐户类型提交的详细信息表格被视为行动。 表单中的用户详细信息可以视为操作的有效负载，表单的类型可以考虑Redux中操作的类型。

Dispatch — The counter Person who sends the copy of the details of the customer to each department of the bank to process can consider as the dispatch in the Redux.

分派—将客户详细信息的副本发送到银行的每个部门进行处理的柜台人员可以视为Redux中的分派。

Reducer — Departments in the bank can consider as the reducer in the Redux. Each department gets a copy of the user details. They check about the user details and Process them according to their need and send Back to the Main database.

减速器-银行中的部门可以将其视为Redux中的减速器。 每个部门都会获得用户详细信息的副本。 他们检查用户详细信息，并根据需要对其进行处理，然后发送回主数据库。

State — Department needs to process the user details according to needs in the departments. Some data can ignore by the department and some need. After these processes updated data which send back to the main database can consider as the state in the Redux Life Cycle.

州-部门需要根据部门中的需求处理用户详细信息。 一些数据可能会被部门忽略，而一些需要。 在这些过程之后，发送回主数据库的更新数据可以视为Redux生命周期中的状态。

These are the Main Steps In the Redux Life Cycle. The real-world scenario will help to get a clear understanding of the Life Cycle Steps. React Developers should have a good understanding of the Redux Life Cycle.

这些是Redux生命周期中的主要步骤。 实际场景将有助于对生命周期步骤有一个清晰的了解。 React开发人员应该对Redux生命周期有很好的了解。

I like to Thank you for reading my article. I hope to write more articles on redux. I think that you will get good knowledge about redux life cycle by reading this article.

感谢您阅读我的文章。 我希望在redux上写更多文章。 我认为通过阅读本文，您将对Redux生命周期有很好的了解。

References :

参考文献：

My Previous Articles on React :

我以前关于React的文章：

翻译自: https://medium.com/swlh/react-redux-life-cycle-making-the-logic-of-your-app-more-predictable-and-easier-to-understand-16d45a015a95

redux 生命周期