Redux actions/reducers 与直接设置状态

2024-04-02

我是 Redux 新手。我无法理解操作和减速器与直接修改存储的组件的价值。

在 Redux 中,您的 React 组件不会直接更改存储。相反,他们发送一个动作——有点像发布一条消息。然后,reducer 处理该操作(有点像消息订阅者)并更改状态(更准确地说,创建一个新状态)作为响应。

我觉得类似 pub/sub 的交互增加了间接层,这使得理解组件实际上在做什么变得更加困难——为什么不允许组件直接将新状态传递到 Redux 存储呢?注入类似的东西会是一件坏事吗this.props.setReduxState进入 React 组件?

我开始理解为什么状态本身需要不可变的价值(相关问题 -Redux 不就是美化了全局状态吗? https://stackoverflow.com/questions/33424157/isnt-redux-just-glorified-global-state),涉及检查更新以查看哪些组件 props 需要更新以响应状态更改。我的问题是额外的操作/减速器层与直接操作存储。


当我决定深入 Redux 兔子洞时,我遇到了一些非常类似的问题。就我而言,我仅使用 React 内部状态来开发相对较小的应用程序和组件,但它仍然工作得很好。只有当应用程序和组件数量变得越来越大时,setState 才变得有些笨拙。

我认为这一点没有得到足够的重视 - 如果您正在开发一个相对较小的应用程序或一些在没有强大的不可变存储解决方案的情况下很容易跟踪的组件,那么您并不总是需要使用 Redux。刚开始就有很多必要的样板,在某些情况下可能会过于耗时。

话虽这么说,React + Redux 是一个很好的设计范式,一旦您习惯了它并拥有可以调用的自己的样板,就可以遵循它。 Redux 本质上更喜欢 props 而不是 state,这强制了不可变的设计,因为你(通常)不能改变 props。这使得 Redux DevTools“时间机器”以及您可以像其他人之前提到的那样扔到商店中的所有中间件一起成为可能。

中间件是其中的重要组成部分,特别是随着针对同步和异步任务(如 redux-saga)的更精确解决方案的出现(https://redux-saga.js.org/ https://redux-saga.js.org/)。国际海事组织“重击”(https://github.com/gaearon/redux-thunk https://github.com/gaearon/redux-thunk当你刚开始时,saga 比 sagas 更容易理解,除非你已经是生成器方面的专家,但 sagas 更可预测,因此从长远来看是可测试的。

因此,您不必为每个组件设置单独的内部状态,而是可以使用一组操作/化简器来代替,因为您知道自己不会错误地改变状态。我找到了 ImmutableJS 的组合(https://facebook.github.io/immutable-js/ https://facebook.github.io/immutable-js/) 并重新选择 (https://github.com/reactjs/reselect https://github.com/reactjs/reselect),它为您提供了可组合的选择器 - 对此非常有用。不需要Object.assigns或大量的扩展运算符,它会为您创建一个新对象。

我不会急于将现有的非 Redux 项目转换为 Redux,工作流程的不同足以导致严重的混乱,但是您很难找到尚未包含 Redux 的新项目的样板文件工作流程。例如“React Boilerplate”(https://github.com/react-boilerplate/react-boilerplate https://github.com/react-boilerplate/react-boilerplate),我知道一开始这让我大吃一惊,但绝对值得体验一下。它确实考验你的函数式编程能力。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Redux actions/reducers 与直接设置状态 的相关文章

  • 表单提交 ReactJS 时出现“类型错误:尝试获取资源时出现网络错误”

    我尝试在启用跨源的情况下从 API 获取一些数据 但收到此错误 同样的事情与JSON占位符 https jsonplaceholder typicode com 用于测试的在线 REST API 使用他们提供的示例 fetch https
  • 我如何设计react-datepicker的样式?

    我在用着webpack 反应日期选择器并设法使用提供的 css 模块导入其 css import react datepicker dist react datepicker cssmodules css 该组件看起来不错 但现在我想让它像
  • 如何在不同页面上使用不同类型的导航栏组件

    我为我们项目的两个不同子系统创建了两个不同的导航栏组件 App js function App return lt gt
  • 反应模式 shouldCloseOnOverlayClick 不起作用

    我正在使用反应模式 点击叠加层后模式不会关闭 我为 isOpen 和 onRequestClose 提供了属性 但模式保持打开状态 closeModal gt this setState modalIsOpen false
  • 如何使用 Cypress 定位没有 id 属性的嵌套输入?

    我正在为 React 项目编写 Cypress 测试 我需要能够瞄准
  • React Map 总是使用最后一个元素的数据调用方法

    我正在制作一个社交媒体应用程序 我正在循环浏览所有评论并将其显示在用户界面上 当我单击编辑时 最后一条评论的文本总是显示在输入中 我尝试了很多不同的方法 改变了结构 使用bind来绑定上下文 但没有任何帮助 我正在使用 React Mate
  • 处理 Redux 和 React 中错误的最佳实践

    我的 redux 操作中有一个异步函数 它在我的减速器中返回一个像这样的对象 user fetching false fetched false error null 所以基本上当我开始调用异步函数时我将 redux 状态更新为fetchi
  • 提及列表和表情符号顶部位置 (Draft.js)

    您能帮我如何将其位置从下到上更改吗 我想在文本顶部而不是底部显示提及列表 关于表情符号列表的同样问题 示例链接 https www draft js plugins com plugin emoji 你可以通过以下方式实现它position
  • 刷新或直接点击链接时找不到 React.js 页面

    我在此链接上有一个反应项目 https notchy cross 000webhostapp com https notchy cross 000webhostapp com 如果向下滚动 您会看到一个名为 产品类别 的部分 https i
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 如何从 Chrome React Dev Tools 打开 VS code 中的组件文件?

    是否可以右键单击 React Dev 工具下可见的组件 然后单击 在 IDE 中显示 从而在 VSCode 中打开该文件 这将是有益的 因为我不必去寻找该组件 我经常想在 VS Code 中查看某个组件的源代码 但由于组件的模块化复用 代码
  • 如何删除原生选项卡的边框

    我需要删除图像中标记的边框 我正在使用react native 和native base 选项卡 我需要删除选项卡的底部边框
  • 如何正确使用react-router-dom中的useHistory()?

    如何使用useHistory 正确吗 我无法从一个反应组件过渡到另一个反应组件 根据 React 文档以及 Stack Overflow 上的说明 我无法从 App js 转换到 MyComponent js 例如 我正在尝试 App js
  • React 设置背景颜色与状态 rgb

    所以我根据数据库的结果生成一个表 在数据库中我保留 rgb 值 例如 75 75 75 现在当我生成列表时 我想使用保存的值设置我的 td 的背景 tbody this state boxes map box i gt tr td box
  • webpack 4 React loadable 不会根据卡盘点分割供应商

    我目前正在使用 webpack 4 和 React loadable 来创建块 它实际上分块取决于断点 然而 供应商规模保持不变 React loadable 还不支持 webpack 4 吗 或者我缺少一些设置 css 实际上似乎被分成了
  • 自定义rc-time-picker的样式

    我在用rc time picker我的项目的包 但我在自定义样式时遇到问题pop up of my time picker成分 这是我的组件的屏幕截图 首先 我需要更改时间的背景颜色item在当时li from light grey 在屏幕
  • 如何在react-bootstrap中禁用表单提交的

    在下面的代码片段中 我有许多文本类型的输入表单 如果用户点击 我似乎会得到相同的合成事件 就像他们按下提交按钮一样 我想忽略作为表单提交 只允许一个人按下 提交 按钮 我删除了一些表单组以减少示例 在所有情况下 按钮或 ENTER 键 e
  • 使用 ApolloClient 从 useContext 挂钩导入一个简单变量

    我的反应相对较新 似乎无法导入client来自上下文的变量 我有一个名为 federation tsx 的文件 其中包含一些代码 我相信这应该是相关部分 const link createHttpLink uri process env U

随机推荐