Redux简介以及Redux应用程序中的状态更新方式

by Syeda Aimen Batool

通过Syeda Aimen Batool

Redux简介以及Redux应用程序中的状态更新方式 (An intro to Redux and how state is updated in a Redux application)

I started learning Redux a few days back and it was an overwhelming concept for me at the start. After polishing my skills in ReactJS by making a personal book reading application, I headed towards Redux to learn more about it.

几天前我开始学习Redux，一开始这对我来说是一个压倒性的概念。 通过制作个人图书阅读应用程序提高了我在ReactJS上的技能之后，我前往Redux进行了更多了解。

Today, I’m going to share a few core Redux concepts without using any view library (React or Angular). This is a kind of a personal note for future reference but it can help others as well.

今天，我将不使用任何视图库(React或Angular)来分享一些Redux核心概念。 这是一种个人笔记，可供将来参考，但也可以帮助其他人。

Let’s dig in together!

让我们一起来挖吧！

什么是Redux？ (What is Redux?)

Redux is an open-source library to improve the predictability of the state in a JavaScript application. It is an independent library. It is commonly used with other libraries like React and Angular for better state management of the application. Redux was created by Dan Abramov in 2015 to handle complex state management in an efficient way.

Redux是一个开放源代码库，用于提高JavaScript应用程序中状态的可预测性。 这是一个独立的图书馆。 它通常与其他库(如React和Angular)一起使用，以更好地管理应用程序状态。 Redux由Dan Abramov于2015年创建，旨在有效地处理复杂的状态管理。

When an application grows larger it becomes harder to manage the state and debug for issues. It becomes a challenge to track when and where the state is changed and where the changes need to be reflected. Sometimes a user input triggers some API call which updates some model. That model in turn updates some state or maybe the other model and so on.

当应用程序变大时，管理状态和调试问题变得更加困难。 跟踪何时以及在何处更改状态以及在何处需要反映更改是一项挑战。 有时，用户输入会触发一些API调用，从而更新某些模型。 该模型继而更新某些状态，或者更新其他模型，依此类推。

In such a situation it becomes grinding to track the state changes. It happens mainly because there is no defined rule to update a state and state can be changed from anywhere inside the application.

在这种情况下，它变得很容易跟踪状态变化。 发生这种情况的主要原因是，没有定义的规则来更新状态，并且可以在应用程序内部的任何位置更改状态。

Redux tries to solve this issue by providing a few simple rules to update the state to keep it predictable. Those rules are the building blocks of Redux.

Redux试图通过提供一些简单的规则来更新状态以使其可预测来解决此问题。 这些规则是Redux的基础。

Redux商店： (Redux Store:)

As we discussed earlier, the main purpose of Redux is to provide predictable state management in our applications. Redux achieves this by having a single source of truth, that is a single state tree. The state tree is a simple JavaScript object which holds the whole state of our application. There are only a few ways to interact with the state. And this makes it easy for us to debug or track our state.

如前所述，Redux的主要目的是在我们的应用程序中提供可预测的状态管理。 Redux通过具有单个真实源(即单个状态树)来实现此目的。 状态树是一个简单JavaScript对象，它包含应用程序的整个状态。 与国家互动的方式很少。 这使我们可以轻松调试或跟踪状态。

We now have only one main state which occupies the whole state of the application located at a single location. Any changes made into the state tree are reflected in the whole application because this is the only source of data for the app. And, this is the first fundamental principle of Redux.

现在，我们只有一个主要状态，它位于单个位置上，占据了应用程序的整个状态。 对状态树所做的任何更改都会反映在整个应用程序中，因为这是该应用程序的唯一数据源。 并且，这是Redux的第一个基本原则。

规则1 – 单一真理 (Rule 1 — Single source of truth)

The state of your whole application is stored in an object tree within a single store. — Official docs

整个应用程序的状态存储在单个存储中的对象树中。 —官方文档

The ways you can interact with a state tree are:

与状态树进行交互的方式是：

• Getting the state
  获取状态
• Listening to the changes in the state
  聆听状态变化
• Updating the state
  更新状态

A store is a single unit that holds the state tree and the methods to interact with the state tree. There is no other way to interact with a state inside the store except through these given methods.

商店是包含状态树和与状态树进行交互的方法的单个单元。 除了通过这些给定的方法之外，没有其他方法可以与商店内的状态进行交互。

Let’s talk about the methods a store gives us to interact with the state.

让我们谈谈商店为我们提供的与州互动的方法。

• getState() — Returns the current state of the application.
  getState()—返回应用程序的当前状态。

• dispatch(action) — The only way to update a state is by dispatching an action and dispatch(action) serves the purpose. We will talk more in detail in a bit.

  dispatch(action)-更新状态的唯一方法是通过调度一个动作， dispatch(action)达到目的。 我们将在后面详细讨论。

• subscribe(listener) — The purpose of this method is to listen for the state changes. Every time a state is changed, it will be called and will return the updated state.
  subscription(listener)—此方法的目的是侦听状态更改。 每次更改状态时，都会调用它并返回更新后的状态。
• replaceReducer(nextReducer) — Replaces the reducer currently used by the store to calculate the state.
  replaceReducer(nextReducer)-替换商店当前用于计算状态的reducer。

Now when we have a store which contains a state tree and a few ways to interact with the state, how can we update application state?

现在，当我们拥有一个包含状态树和与状态进行交互的几种方式的商店时，如何更新应用程序状态？

在应用程序中更新状态： (Updating state in the application:)

The only way to update a state is to dispatch an action. This is the 2nd rule.

更新状态的唯一方法是调度动作。 这是第二条规则。

规则2- 状态为只读 (Rule 2 — State is read-only)

An action is a plain JavaScript object to keep track of the specific event taking place in the application. What makes it special is a ‘type’ property which is a necessary part of it.

动作是一个普通JavaScript对象，用于跟踪应用程序中发生的特定事件。 使其与众不同的是“类型”属性，这是它的必要组成部分。

{  type: "ADD_BOOK_TO_THE_CART"}

The main purpose of this property is to let Redux know about the event taking place. This type should be descriptive about the action. Along with the ‘type’ property, it can have other information about the event taking place.

此属性的主要目的是让Redux知道事件的发生。 此类型应描述操作。 除了'type'属性外，它还可以包含有关事件发生的其他信息。

Actions can have as much information as you want. It is a good practice to provide less and necessary information — preferably an id or any unique identifier wherever possible.

动作可以具有所需的尽可能多的信息。 最好提供尽可能少的必要信息，最好是id或任何唯一的标识符。

Here we have an action to add a book to the cart.

在这里，我们有一个将书添加到购物车的操作。

Once we define our action we pass it to the dispatcher. store.dispatch() is a function provided by the library which accepts an action to perform an action against the state. Redux restricts updating the state to this method only.

定义动作后，我们会将其传递给调度程序。 store.dispatch()是库提供的功能，该功能接受一个操作以针对该状态执行操作。 Redux将更新状态限制为仅此方法。

This strict way of updating the state ensures that the state can not be changed directly either by view or any network callback. The only way to update a state is by defining the action and then dispatching it. Remember that actions are plain JavaScript objects. Actions can be logged, serialized, and replayed for debugging purposes.

这种严格的状态更新方式可确保状态不能直接通过视图或任何网络回调进行更改。 更新状态的唯一方法是定义操作，然后分派操作。 请记住，动作是普通JavaScript对象。 可以记录，序列化和重播操作以进行调试。

We now have a store, a state, and an action in our app to perform some tasks against the state. Now we need a way to use these actions to actually do the update. This can be done by using a pure function and this is rule #3.

现在，我们的应用程序中有一个商店，一个状态和一个动作，以针对该状态执行一些任务。 现在，我们需要一种使用这些操作来实际执行更新的方法。 这可以通过使用纯函数来完成，这是规则3。

Rule3 — 使用纯函数进行更改 (Rule3 — Changes are made with pure functions)

Magic happens here. We need a simple pure function, which, as a parameter, takes the current state of the application and an action to perform on the state, and then returns the updated state. These functions are called reducers.

魔术在这里发生。 我们需要一个简单的纯函数，该函数以参数的形式获取应用程序的当前状态和对该状态执行的操作，然后返回更新后的状态。 这些功能称为减速器。

These are called reducers because they take the collection of values, reduce it to an updated state and then return it. Since reducers are pure functions they do not mutate the original state. Instead, they return the updated state in a new object. Our application can have one or more than one reducer. Each reducer can have a relevant state to perform specific tasks.

之所以称为简化器，是因为它们接受值的集合，将其简化为更新后的状态，然后将其返回。 由于化简器是纯函数，因此它们不会改变原始状态。 而是，它们在新对象中返回更新后的状态。 我们的应用程序可以具有一个或多个减速器。 每个reducer可以具有相关的状态以执行特定任务。

Since reducers are pure functions, they should have the following attributes:

由于reducer是纯函数，因此它们应具有以下属性：

• Given the same input, it should return the same output every time — No mutation is allowed.
  给定相同的输入，它每次都应返回相同的输出-不允许任何突变。
• No side effects — No API call data change from an external source.
  无副作用-没有来自外部源的API调用数据更改。

的过程。 (The process.)

If we connect the dots, Redux is a library which has a store that contains a state tree and a few methods to interact with the state. The only way to update a state inside a store is to dispatch an action and define a reducer function to perform tasks based on the given actions. Once dispatched, the action goes inside the reducer functions which performs the tasks and return the updated state to the store. This is what Redux is all about.

如果我们将点连接起来，则Redux是一个包含库的库，该库包含状态树和一些与状态进行交互的方法。 更新商店内部状态的唯一方法是调度一个动作并定义一个reducer函数以根据给定的动作执行任务。 调度后，该动作将进入化简函数内部，该化函数执行任务并将更新后的状态返回给商店。 这就是Redux的全部意义。

到目前为止，我们学到了什么？ (What have we learned so far?)

Let’s summarize what we have learned so far to connect the dots.

让我们总结一下到目前为止所学的知识。

• Redux — An opensource predictable state container

  Redux —一个开源的可预测状态容器

• State Tree — A plain JavaScript object which contains whole application state
  状态树-包含整个应用程序状态的普通JavaScript对象

• Three ways to interact with a state (the only ways):

  与状态交互的三种方式(唯一方式)：

  Three ways to interact with a state (the only ways):Store — A single unit which contains state tree & methods to interact with the state tree

  与状态交互的三种方式(唯一的方式)： 存储 —包含状态树和与状态树交互的方法的单个单元

  Three ways to interact with a state (the only ways):Store — A single unit which contains state tree & methods to interact with the state treeActions — Plan Javascript objects to describe the action taking place

  与状态进行交互的三种方式(唯一的方式)： 存储 —包含状态树和与状态树进行交互的方法的单个单元动作 —计划Javascript对象以描述发生的动作

  Three ways to interact with a state (the only ways):Store — A single unit which contains state tree & methods to interact with the state treeActions — Plan Javascript objects to describe the action taking placeReducers — Pure Javascript functions to take current state and an action to return a new state

  与状态进行交互的三种方式(唯一的方式)： 存储 -包含状态树和与状态树进行交互的方法的单个单元动作 -计划Javascript对象以描述正在发生的动作Reducers-纯Javascript函数获取当前状态以及返回新状态的动作

Since Redux is an independent library which can be used with React, Angular or any other library, I avoided making a sample application with any of these view libraries. Instead, I focused on the core Redux concepts only.

由于Redux是一个独立的库，可以与React，Angular或任何其他库一起使用，因此我避免使用这些视图库中的任何一个来制作示例应用程序。 相反，我只关注核心Redux概念。

Redux can be overwhelming at first and if you are a newbie or junior developer it can give you a tough time. But consistency and a positive attitude is the key to success. If you are struggling to survive as a junior developer and looking for some motivation, you can read how I struggled to overcome the challenges I faced as a junior dev.

刚开始时Redux可能会让人不知所措，如果您是新手或初级开发人员，它可能会给您带来困难。 但是，一致性和积极态度是成功的关键。 如果您正在努力以初级开发人员的身份生存并寻找动力，您可以阅读我如何克服初级开发人员所面临的挑战。

Say Hi @aimenbatool.

打个招呼@aimenbatool。

翻译自: https://www.freecodecamp.org/news/an-intro-to-redux-and-how-state-is-updated-in-a-redux-application-839c8334d1b1/