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 与直接设置状态 的相关文章

  • Azure Devops 反应脚本测试永远挂起

    我正在尝试在 Azure Dev Ops 中运行我的 React 应用程序的测试 但我不知道如何在测试运行后停止执行 它只是挂在那里 使管道永远处于运行模式 这是一个简单的 create react app 应用程序 有几个测试 以下是我的
  • 更改react-chartjs 2中的工具提示方向

    我已经实现了react chartjs2https www npmjs com package react chartjs 2 https www npmjs com package react chartjs 2在我的反应应用程序中 我已
  • 在非输入元素上反应 onKeyDown/onKeyUp 事件

    我需要捕获 cmd 按钮向上和向下事件 以便选择是否在 setState 中使用串联 例如 我如何在表元素上获取这些事件 您必须在主体 窗口级别捕获按键 表元素没有输入焦点 因此您无法从表中捕获键 没有输入元素 var cmdDown fa
  • React中ComponentDidMount生命周期方法被调用两次

    在我的 React 应用程序中 加载应用程序时会进行两次初始 API 调用 我查看了 Chrome gt inpsect 中的网络选项卡 启动器 调用堆栈显示第一个调用是从VM123000 bundle js而第二个调用只是从实际的bund
  • 找不到模块:错误:包路径。未从包中导出

    import firebase from firebase const firebaseConfig apiKey AIzaSyBOK7x5N5UnjY4TDqndzH7l5tvdNIsWFRc authDomain todo app e3
  • 如何使用 Webpack 将我的 React 网站打包为“生产”?

    我设法使用这个反应热样板 https github com gaearon react hot boilerplate配置脚本来创建和测试一个简单的 React Flux Web 应用程序 现在我有了一个跑步时喜欢的网站npm start
  • 使用 css 模块如何定义全局类

    我正在使用 css 模块 但是我在组件中使用的一个用 JavaScript 附加推文的库向我的组件添加了一些元素 结构如下 div class user div div class tweet div 我现在想在组件的 css 模块中设置这
  • 什么时候使用useEffect?

    我目前正在查看 React 文档的 useEffect 示例 import React useState useEffect from react function Example const count setCount useState
  • ReactJs 中输出事件的 Angular

    我正在寻找在 ReactJs 中创建类似 Angular 等输出事件的方法 我正在根据 Atomic 设计在 ReactJs 中制作一个组件库 因此 例如 我在其他组件中注入了一个 Button 我想知道如何为 Button 编写一个 pr
  • 检查所有子组件是否已安装

    有什么办法可以检测孩子是否已经挂载了吗 当我初始化同位素时 必须安装所有子组件才能初始化 超时时间为 5 毫秒 它按预期工作 但我确信有更好的方法 componentDidMount function var container this
  • ReactJS 无效校验和

    尝试使用 ReactJS 和 Node js 进行服务器端渲染时 我不断收到以下错误 React attempted to use reuse markup in a container but the checksum was inval
  • React this 与已经绑定的方法未定义[重复]

    这个问题在这里已经有答案了 我有一个反应应用程序 我正在尝试使用 JavaScript 文件中的数据构建一个导航栏组件 我的 NavbarData js 文件如下所示 const NavbarData id 1 text Typograph
  • 图片是在外部库中加载的,如何用webpack加载它们?

    首先 我需要说的是 我对 Webpack 的基础知识知之甚少 这可能就是我找不到解决方案的原因 所以我知道为了加载图像我需要一个路径而不是仅仅将其作为字符串输入require path to image 然后我得到了一个外部库 我需要在其中
  • 多个 BrowserRouter 显示多个组件

    我想用basename来分离组件 我也有全局 url 所以我最终使用了 3 个BrowserRouters 这会导致显示多个内容 如果我去 fruit search 它会显示以下内容Homepage组件和FruitSearch成分 我究竟如
  • 纯组件在没有变化时渲染?

    我有一个像这样的纯组件 interface Props checkBoxTitleStyle any checkBoxBackgroundColor any onPressCheckBox id isChecked selectedArra
  • React hooks 需要返回值吗?

    我最近开始在我的 React 应用程序中构建自定义挂钩 并一直在关注 React 网站上的文档 然而 我正在构建的钩子不需要返回值 因为它们在初始化时为 Redux 设置数据 Example custom hook export const
  • 添加鼠标事件到svg ,检测网格悬停

    我有一个有点复杂的问题 我正在尝试通过 svg 渲染网格 然后将事件侦听器添加到网格中 目前我正在通过渲染网格
  • 有没有一种方法可以在不使用angerlySetInnerHTML的情况下在文本中换行?

    我需要更换 n to br 但它是按照文本来理解的 我怎样才能做到这一点而不使用dangerouslySetInnerHTML 像平常一样插入文本 然后使用 CSS 修复换行符 http www w3schools com cssref p
  • React Native + Redux 基本身份验证

    我正在寻找一种为我的反应本机应用程序创建基本身份验证的方法 我找不到任何反应本机应用程序的好例子 要登录 应用程序将电子邮件 密码 clientSecret 发送到我的服务器 如果OK 服务器返回accessToken refreshTok
  • 如何将 Redux DevTools 扩展添加到我的 React-Redux 商店?

    我正在尝试将 Redux DevTools Chrome 扩展添加到我的 redux 商店 并在此处进行描述 http extension remotedev io http extension remotedev io 这是我的商店 le

随机推荐