Redux 101

我为什么写这篇文章

React 没有状态管理的问题

Redux 解决的问题

关于Redux的四个重要概念

这是两个 Redux 迷你系列的第一部分。

• 第一部分：理解 Redux
• 第二部分：设置 Redux 和 React 应用

我为什么写这篇文章

如果你是一名 React 开发者，Redux 可是个响当当的名字。刚开始学习它的时候，我很难理解。即使是基础教程也很难理解，因为里面有一些我当时不认识的术语：reducer、action、store、纯函数等等🤷‍♂️🤷‍♀️。

现在我已经使用了一段时间了（非常感谢指导我的同事），我想帮助人们了解 Redux。

我希望读完本文后，您能够了解：

1. React 没有状态管理的问题
2. Redux 解决的问题
3. Reducer、store、initialState 和 action 是什么

这个概念也适用于任何状态管理库，例如 Vuex。所以即使你不是 React / Redux 开发者，这篇文章也可能会对你有所帮助。

React 没有状态管理的问题

当我了解 Redux 时，我的第一个问题是“我为什么需要它？”

了解 Redux 解决的问题有助于理解它。Redux 可以帮助你管理应用程序的状态。Redux官网称 Redux 是一个“JS 应用的可预测状态容器”。这究竟是什么意思呢？

想象一下 React 应用中的一个页面，其中包含一个表单和一个按钮。你填写表单，然后点击按钮。接下来会发生以下几件事：按钮变红，表单隐藏。

此页面由两个 React 组件组成：Form.jsx和Button.jsx。记住，组件是可重用的。保持它们独立很重要，这样我们可以Button.jsx在需要时在不同的地方重复使用它们。

回到我们的应用。这里我们遇到了一个问题：我们的按钮该如何让表单隐藏？它们既不是同级关系，也不是父子关系。🤷‍♂️

这就是我们在使用像 React 这样的有状态框架时面临的问题。它有很多彼此不了解的组件。让一个组件改变另一个组件的状态会非常棘手。

Redux 解决的问题

Redux 是一个状态管理库。使用 Redux，按钮现在可以访问和更改isHidden表单使用的状态。Redux 是如何做到的？

Redux 是一个命令中心。这个命令中心有一个存储状态的存储空间。这些状态包括颜色和 isHidden。

我们的应用程序可能有这样的初始状态：

{
  buttonText: 'Submit',
  buttonColor: 'blue',
  isHidden: false,
  awesomeNotes: [
    {title: 'awsome!', id: 1},
    {title: 'awesomer!', id: 2}
  ]
  ...
}

所有连接到我们商店的组件都可以访问它。我们的表单可以看到商店里的所有内容，包括isHidden和buttonColor。我们的按钮可以看到商店里的所有内容，包括isHidden和buttonColor。

由于所有重要状态都是集中的，因此它们可以共享到不同的组件以供使用和更新。

当我们点击按钮时，想象一下按钮向指挥中心提交请求：“嘿指挥中心，你能将 CHANGE_BUTTON_COLOR 更改为红色并将 TOGGLE_FORM_IS_HIDDEN 更改为吗？”

当指挥中心收到请求后，它会处理来自按钮的请求，并在商店中将这些请求更新buttonColor为red和。isHidden

我们商店的状态现在如下所示：

{
  buttonText: 'Submit',
  buttonColor: 'red',
  isHidden: true,
  awesomeNotes: [
    {title: 'awsome!', id: 1},
    {title: 'awesomer!', id: 2}
  ]
  ...
}

当状态改变时，由于按钮和表单已连接到存储，它会以新的状态重新渲染。按钮现在可见为红色，而表单现在隐藏。

我这里略过一步。之前我提到过，按钮向指挥中心发出了请求。当指挥中心收到请求时，它并不知道该如何处理。想象一下，按钮只会说西班牙语，而指挥中心只会说英语。我们需要指挥中心里一个既懂英语又懂西班牙语的人，把请求翻译成指挥中心能理解的内容！

将按钮请求转换为命令中心可以理解的内容是由 REDUCER 完成的。在 React 中，来自按钮的请求可能如下所示：

{
  type: 'TOGGLE_FORM_IS_HIDDEN',
}

请求可能包含参数：

{
  type: 'CHANGE_BUTTON_COLOR',
  color: 'red'
}

这个请求，用Redux的术语来说，叫做ACTION。

回到我们的类比，指挥中心终于收到了他能理解的信息。多亏了我们的翻译器，“TOGGLE_FORM_IS_HIDDEN”和“CHANGE_BUTTON_COLOR”这两个请求，指挥中心才能够理解。他清楚地知道该做什么。

例如，当收到请求“TOGGLE_FORM_IS_HIDDEN”时，命令中心会执行以下操作：

1. 他isHidden发现
2. 他将其切换为与之前相反的状态。
3. 按钮和 awesomeNotes 上的其余状态不属于“TOGGLE_FORM_IS_HIDDEN”的一部分，因此他将它们保留原样。
4. 当指挥中心执行完请求后，它会返回isHidden更新的状态。

按钮感知到buttonColor有了新的状态（"red"），表单也感知到isHidden有了新的状态（true）。由于状态更新，React 重新渲染。这就是为什么我们看到按钮颜色改变，表单隐藏了。

这就是 Redux 工作原理的基本类比。

关于Redux的四个重要概念

上面提到的有关 Redux 的四个概念对于它的运行至关重要：

• 初始状态
• 行动
• Reducers
• 店铺

初始状态

初始状态是应用程序启动时的状态。例如，按钮最初为蓝色，并且表单未隐藏（isHidden: false）。当我们刷新应用程序时，Redux 将丢失所有更新的状态并恢复到初始状态。

行动

按钮发出的请求是操作。操作是事件。操作只不过是一个对象。至少，操作必须包含一个type。

{
  type: "CHANGE_BUTTON_COLOR",
  color: "red"
}

当按钮点击时请求“CHANGE_BUTTON_COLOR”时，我们称之为分派动作。

Reducers

Reducer 是一个会说西班牙语和英语的人，帮助指挥中心理解请求。从技术上讲，Reducer 也执行相应的操作（Reducer 既是翻译器，也是指挥中心）。

我花了很长时间才理解 Reducer 是什么，因此我将在这里详细说明：

假设我们的 Reducer 可以理解两个 action：“ADD_NOTE” 和 “DELETE_NOTE”。我们的 Reducer 如下所示（使用 switch case 的常规方式）：

  switch(action.type){
    case ADD_NOTE:
      return [...state, action.note]

    case DELETE_NOTE:
      // return logic to delete note

    default:
      return state;
  }

该操作可能如下所示：

{
  type: "ADD_NOTE",
  note: "This is my awesome note!",
}

我们的 Reducer 检查类型 ( action.type) 并找到匹配项 ( "ADD_NOTE")。它返回更新后的状态：（[...state, action.note]先前状态 + 最新注释）

如果你发送这个 reducer 的“UPDATE_NOTE” action，它不知道该做什么。它只会默认状态（default）。你可以在这里添加任意数量的不同用例场景。

简而言之，reducer 有一组指令。当它接收到一个 action 时，它会查找匹配的 action type。当找到匹配项时，它会执行该指令设置的任何操作，并返回修改后的状态。请记住，状态是不可变的。我们不会直接更改 states 数组。我们返回的是一个新的 notes 数组，包含旧 notes 和新 notes。

再次强调，不要改变实际状态。返回更新后状态的副本。

店铺

存储是存储状态的地方。想象一下一个巨大的仓库，外面有保安守卫。我们不能直接进入存储并修改值。保安不会允许你这么做。你需要一个特殊的许可证。这个许可证叫做 动作调度。只有调度保安才能让你更新存储。

商店可能看起来像这样：

{
  buttonText: 'Submit',
  buttonColor: 'blue',
  isHidden: false,
  awesomeNotes: [
    {title: 'awsome!', id: 1},
    {title: 'awesomer!', id: 2}
  ]
  ...
}

这应该涵盖了 Redux 的基本知识。关于 Redux 还有很多内容我还没有讲到。希望这些内容足以帮助你开始使用 Redux。

下次，我们将创建一个简单的 React / Redux 应用！您可以在这里👉 👈 找到下一个教程。

非常感谢你读到这里。我真的很感激。如果你发现任何错误，或者有什么建议，请告诉我，让我改进，以便更好地服务你们！👍