|
Post by account_disabled on Jan 28, 2024 3:35:31 GMT
我发现大多数 Redux 开发人员的一个共同趋势是对setState(). 我们中的很多人(是的,我以前多次陷入这个陷阱)看到setState()并试图将所有数据保留在我们的 Redux 存储中。但是,随着应用程序复杂性的增加,这会带来一些挑战。 Backward Skip 10s Play Video Forward Skip 10s 在这篇文章中,我将引导您了解各种策略来模拟您的状态,并深入探讨每种策略何时可以使用。 入门 Redux 的工作原理是成为应用程序状态的单一事实来源。新一季的《权力的游戏》正在播出,我相信每个人都很高兴知道这将如何展开。让我们构建一个有趣的《权力的游戏》粉丝列表页面,以详细了解这些概念。 注意:我将用来yarn运行该应用程序。如果您没有设置纱线npm,请将纱线替换为。 在我们深入之前,从存储库下载基本框架并运行: yarn install yarn run start 您应该会看到一个基本列表页面,其中列出了一些您最喜欢的 GoT 角色。 注意:我们将使用鸭子模式来编写我们的应用程序。它减少了不必要的模块导入并减少了大量样板文件。 Redux 简介 本文的目的是帮助您构建 Redux 应用程序。它假设您具备图书馆的基本知识。我将简要概述 Redux 概念,这将帮助您更好地理解本文的其余部分。如果您 WhatsApp 号码数据 熟悉它们的工作原理,请随意跳过本节。 所有 Redux 应用程序都使用四个重要的构造:操作、减速器、存储和容器。 行动 动作是更新状态的意图。它可以由网络调用或用户单击按钮触发。动作有两部分: 动作型。代表操作的唯一标识符。 有效载荷。与操作关联的任何元数据。例如,如果我们发出网络请求来获取电影列表,则来自服务器的响应就是有效负载。 对于这个例子,我们将使用一个名为redux-actions创建动作的库。 减速机 减速器是一个监听操作并返回新状态表示的函数。 店铺 一个应用程序可以分为许多reducers,代表页面的各个部分。 商店将所有这些集合在一起并保持应用程序状态完整。 集装箱 容器将您的应用程序状态和操作与组件连接起来,并将它们作为 props 向下传递。 为了深入了解其工作原理,我建议您首先查看Dan Abramov 的免费介绍系列。 拆分应用程序数据和 UI 状态 列表页面很不错,但这些名字并没有给《GoT》宇宙的新手提供任何背景信息。让我们扩展该组件来渲染角色描述虽然这解决了问题,但我们的设计师觉得页面看起来很笨拙,最好折叠这些信息直到用户需要它。我们可以采取三种不同的方法来解决这个问题。 该setState方法 在 React 中实现这一点的最简单方法是使用setState()组件本身存储数据只要我们处理的状态仅是组件的本地状态,就可以使用。例如,如果我们想要放置一个“全部展开”功能,那么仅用 React 就很难处理这个问题。 让我们看看如何将其移至这是许多开发人员在开始使用 Redux 时遵循的一般模式。
|
|