前言
这是我关于哈布雷的第一篇文章，所以不要太苛刻（好吧，或者要有建设性地判断）。
我想指出的是，采用这种方法，对我而言，主要优势在于，我们清楚地按模块划分和委托了业务逻辑。一个模块负责一件事情和非常具体的事情。也就是说，使用这种方法，在开发过程中没有想到：“我在哪里可以（更好地）做到这一点？” 通过这种方法，可以立即清楚地确定应该在哪里解决任务/问题。
档案结构
项目结构+是标准的。我将尝试简要地告诉您程序集本身所包含的内容
- 为了准备异步操作，我使用了传奇的中间件-关于thunk中间件的更加灵活和强大的功能
- 我有css-modules样式组件。实际上，该概念与样式化组件的概念相同，但是以某种方式对我来说更方便
- 容器和组件之间的中间层，用于控制从商店扔到组件中的道具（过滤，备忘录和方便地操纵任何应用程序状态的字段名称的能力）-重新选择
Redux Sagas
Redux sagas文档sagas
的主要本质（并且不仅是）是我们将按模块处理请求的业务逻辑分开。每个传奇都负责自己的API。如果我需要获取用户数据并对其成功收货采取行动-我将在单独的模块usersSagas.js中
进行操作。支持sagas的主要因素（对我而言）是：
UPD（增加了关于承诺地狱的要点）
- 1）以友善的方式行事的事实应该仅仅是赋予对象的功能。如果某些动作看起来有所不同（这就是使用重击功能时发生的事情），我想以某种方式将它们转换为一种形式，因为某种程度上这并不适合单个概念。我想将请求的逻辑和处理请求的数据放到一个单独的模块中-这就是sagas的用途
- 2）通常，如果我们需要发出几个使用来自对先前请求的响应中的数据的请求（并且我们不想在存储中存储中间数据？），则Redux-thunk邀请我们做出新的操作，在该操作中我们将调用另一个异步操作请求，其中进行了2次（例如）相同的迭代。就我而言，它散布着许诺的地狱，通常看起来很凌乱，而且使用起来不方便（嵌套太多）
CSS模块/样式化的组件
我经常在项目中看到人们在一些常见的CSS模块中编写样式组件的规则。
我完全反对。该组件是一个隔离的系统。它应该尽可能地可重用。因此，最好单独设置样式。
重新选择
选择器有几个目标：
- , . , , ( , ). , , . - getFilteredItems,
- ,
- . - . - . friends. , . , . , , friends contacts. reselect , , . — .
因为最后一点，我淹没了，因为我们每打喷嚏都会重做一次。重新选择-不仅用于记忆，还用于更方便地绘制应用程序状态树
组件和容器
在经典的React方法中（不使用用于将商店存储为单独实体的库），有两种类型的组件-Presentational和Container-Components。通常（据我了解），这不是严格的文件夹划分，而是概念上的划分。
表达的成分是愚蠢的。实际上，它们只是作为道具投入到其中的数据的布局和显示。 （此类组件的示例可以在上面的css-modules中找到）
容器组件-封装了处理组件生命周期的逻辑的组件。例如，他们负责调用负责请求数据的操作。它们返回最小的布局，因为布局是在Presentational-Components中隔离的。
例子+-容器组件：
Redux容器实际上是redax端和react组件之间的一层。在它们中，我们调用选择器并将动作扔进组件的react道具中。
我是FOR有每一个喷嚏其自己的容器。首先，它使您能够更好地控制投掷到组件中的道具，其次，它使您可以使用重新选择来控制性能。
通常，我们需要重用一个组件，但是要使用商店的不同部分。事实证明，为此，我们只需要编写另一个容器并在需要时将其返回即可。就是说，多对一的关系（很多是容器，一个是组件。对我来说，从概念上来说很方便）
我还想举一个更常见的示例，以支持对大多数组件进行容器化。
我们有一组数据（例如，一组用户），这些数据是从某些API接收的。我们还有无限滚动，客户不会拒绝。我们向下滚动了很长时间，并加载了约10k +数据。现在，我们更改了一个用户的某些属性。我们的应用程序将减慢很多速度，因为：
- 我们将全局容器附加到带有用户列表的整个页面上
- 更改用户数组的一个元素的一个字段时，将在用户缩减程序中返回一个具有新元素和索引的NEW数组
- 放置在UsersPage组件树中的所有组件都将被重绘。包括每个用户组件（数组元素）
如何避免这种情况？
我们制作容器
- 与用户排列
- 数组元素（一个用户）
此后，在包装在“带有用户的数组”容器中的组件中，我们返回“数组元素（一个用户）”容器，并
在其中放置了键（需要响应的道具），索引在mapStateToProps的“数组元素（一个用户）”容器中，我们是第二个容器作为参数，我们采用容器返回的组件的ownProps（在索引中）。通过索引，我们仅从存储中直接取出数组的一个元素。
此外，优化仅更改元素的重绘会变得更加容易（整个数组被重绘，因为在化简器中我们做了某种映射-为每个元素返回一个带有新索引的NEW数组）-在这里我们将通过重新选择
container array：
container element来帮助您：
element-selector：
如果有任何补充，我将在评论中愉快地阅读它们。