拆箱Redux

Redux只是一家商店

Redux是一个Javascript库，可帮助开发人员管理应用程序状态，例如，它可以是登录用户或社交网络应用程序中给定用户的关注者。

我和Redux一起工作了几个月，真是太棒了当我开始使用它时，我的脑海中浮现出一些东西。然后，我记得很久以前我已经读过Flux设计模式了。如果您对redux或flux没有任何了解，请不要担心，我会尽力说清楚。我刚刚意识到这两件事情。我告诉自己：“所以，这只是一个助焊剂实施，但你只有一个商店”。

当我对那些习惯与Redux合作的人说这样的时候，他们的反应是这样的：
“什么？什么是助焊剂？”。这有点奇怪，因为对我来说，很明显redux与通量有关。但后来我意识到了什么。在没有考虑通量的情况下谈论Redux真的很容易。大多数人将Redux描述为前端的应用程序状态管理库，这是事实。但我认为这不是最完整的答案。如果你跳进去并开始使用它，你就会错过大局。别担心，我不判断如果您刚刚加入了使用此库的项目，您必须了解它是如何工作的并完成工作，对吧？它可能需要一些时间，直到一切都有意义。

如果您不知道redux是什么，那么您来对地方了。我会用简单的语言向你解释。即使你熟悉Redux，你确定你真的知道它是什么以及它的所有概念来自哪里？

我认为，定义redux意味着你首先要解释通量是什么。一旦你理解了它，redux就会自然而然地出现，你会明白为什么我把它定义为“只有一个商店的通量”。

这不是一个flux或redux教程。在这篇文章中，我将做Redux的“拆箱”，这意味着，我将尝试解释它是什么以及它的核心概念来自何处。
如果你已经迷路了，别担心。我将其分解，以便您最终了解Flux和Redux是什么。然后，您可以跳转到Redux入门指南并开始构建精彩的项目
让我为你“拆箱”Redux。

助焊剂

当我打开Redux盒子时，我发现的第一件事就是Flux。它是由Facebook创建的用于管理应用程序状态的设计模式。我不会专注于任何特定的实现。我想一旦你理解了模式，你就可以找到任何实现并开始使用它。
它有行动，单个调度员，一个或多个商店，当然还有观点。让我们分解一下：

• 动作：这只是一个对象，至少需要一个类型键，它将定义动作的类型。稍后将使用此类型来决定状态更新

• Dispatcher：它的职责是将动作发送到所有商店

• 存储：存储接收操作并相应地更新应用程序状态

• 视图：这只是用户与之交互的UI组件

下图显示了此模式的主要组件以及它们如何相互交互：

它的工作原理如下：

• 用户与应用视图交互，这些交互将创建操作

• 操作通过Dispatcher发送到所有商店

• 被编程为收听给定动作的每个商店都可以更新其状态

• 如果需要，新状态将可供视图使用

每个商店负责处理给定域的状态和逻辑。例如，如果您要创建社交网络，则可能有一个用于管理用户的商店和另一个用于提供商品的商店。有些商店会监听已发送的操作，有些商店会忽略它，由开发人员决定哪个商店关心哪些操作。在该示例中，动作可以是“获取用户的馈送”或“用户请求跟随另一个用户”。
这是一个非常简化的Flux视图。我建议你深入了解官方文档。

现在我向你展示了Redux盒子内部的Flux图案，让我们转到盒子本身…… Redux

终极版

查看Flux后，将其更改为只有一个商店并添加Reducer的概念。就是这样，现在你有了Redux。
下图显示了Redux的不同组件如何相互交互：

它的工作原理如下：

• 用户与视图交互，这可以创建一些操作

• 这些操作将（通过Dispatcher）发送到reducer

• reducer接收当前状态和动作，并返回新状态

• 现在只需要从商店获取新状态

看起来很像Flux，对吧？但你只有一家商店。更改状态的唯一方法是调度操作。 reducer将获得它并返回新状态。关于reducer的一个非常重要的事情是，它必须是一个纯函数，它是一个函数，它为相同的参数产生相同的结果，并且没有任何副作用。这意味着reducer必须创建一个新的状态对象，而不是修改现有的状态对象。这是Redux检测状态更新的唯一方法。
例如，如果您正在处理社交网络项目，您的状态可能如下所示：

{   “追随者”： （），   “以下”： （），   “饲料”： （） } 

而减速机……

功能 减速器 （州， 行动） {   开关 （行动。类型） {     案件 “FETCH_FEED_SUCCESS”： {       常量 { 饲料 } = 行动;       返回 { ...州， 饲料 };     }     案件 “FETCH_FOLLOWERS_SUCCESS”： {       常量 { 追随者 } = 行动;       返回 { ...州， 追随者};     }     案件 “FOLLOW_SOMEONE”： {       常量 { userToFollow } = 行动;       常量 { 以下 = （）： currentFollowing } = 州;       常量 以下 = （...currentFollowing， userToFollow）;       返回 { ...州， 以下 };     }     默认：       返回 州;   } } 

默认情况下不需要创建新对象，因为它不会修改状态。
只有一台减速机会带我们去一个非常大而且凌乱的减速机功能，对吧？好吧，幸运的是你可以将reducer拆分成多个函数，每个函数只负责处理部分状态。

//饲料减速机 功能 饲料 （州， 行动） {   开关 （行动。类型） {     案件 “FETCH_FEED_SUCCESS”： {       常量 { 饲料 } = 行动;       返回 饲料;     }     默认：       返回 州;   } }  //追随者减速器 功能 追随者 （州， 行动） {   开关 （行动。类型） {     案件 “FETCH_FOLLOWERS_SUCCESS”： {       常量 { 追随者 } = 行动;       返回 追随者;     }     默认：       返回 州;   } }  //关注减速机 功能 以下 （州， 行动） {   开关 （行动。类型） {     案件 “FOLLOW_SOMEONE”： {       常量 { userToFollow } = 行动;       返回 { ...州， userToFollow };     }     默认：       返回 州;   } } 

你可以通过combineReducers函数来做到这一点。所有合并的减速器都将收到您发送的任何动作。你必须这样做，因为这里只有一个商店，这意味着只有一个减速器。

像Flux一样，你仍然有动作和商店，但是更简单。您只需要调度操作并处理reducer中的状态更改。

您可以将Redux与您选择的任何UI框架一起使用。有些软件包可以为您提供一些功能，使您可以更轻松地将框架连接到redux存储。例如，如果要将Redux与React一起使用，则需要react-redux包。

结论

如果不了解激发所有这些概念的灵感，例如行动和商店，那么很容易直接进入redux。我认为重要的是要全面了解并了解助焊剂，即使它只是一个简化的概述，就像你刚才读到的那样。乍一看，通量可能有点棘手。我认为Redux以更简单，更简单的方式为您提供此模式。您只有一个存储，状态更新由reducers处理，需要是纯函数。

下次有人问你什么是redux时，你可以直接拆箱。首先显示Redux框。然后，打开它并从盒子中取出Flux。现在你解释Flux，最后，你回到Redux盒子，一切都很有意义。这就是我用这个简单的句子定义Redux的原因：“Redux只是一个只有一个商店的通量”。

我希望你喜欢并学到了一些东西。快乐的编码 🙂

让我知道你的想法，并关注我关于开发东西更酷的内容:)

codingsam01 @Twitter

codingsam01 @ Instagram