开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

redux中的Reducer开始显得多余了--有没有更好的方式将它们结合起来？

在Redux中，Reducer的作用是根据不同的action类型来更新应用的状态。然而，随着应用规模的增长，Reducer的数量可能会变得庞大且难以维护，这时候可以考虑使用Redux中间件来优化代码结构。

Redux中间件是一个位于action被发起和reducer之间的拦截器，它可以在处理action之前或之后执行自定义的逻辑。通过使用中间件，我们可以将一些通用的逻辑从Reducer中抽离出来，使得Reducer只关注状态的更新。

常用的Redux中间件有redux-thunk、redux-saga和redux-observable等。这些中间件可以帮助我们处理异步操作、副作用以及复杂的业务逻辑。

redux-thunk是Redux官方推荐的中间件，它允许我们在action中编写异步的逻辑。通过返回一个函数而不是一个普通的action对象，我们可以在函数中进行异步操作，并在操作完成后再dispatch一个真正的action。这样可以方便地处理异步请求、延迟操作等场景。腾讯云相关产品推荐：云函数SCF（https://cloud.tencent.com/product/scf）
redux-saga是一个强大的Redux中间件，它使用了ES6的Generator函数来处理异步操作。通过创建saga，我们可以将复杂的异步流程以及副作用与Redux的action和reducer分离开来，使得代码更加清晰可读。腾讯云相关产品推荐：Serverless Framework（https://cloud.tencent.com/product/sls）
redux-observable是基于RxJS的Redux中间件，它使用Observable来处理异步操作。通过使用Observable的强大功能，我们可以轻松地处理异步流、事件组合等复杂的业务逻辑。腾讯云相关产品推荐：消息队列CMQ（https://cloud.tencent.com/product/cmq）

除了上述中间件，还有其他一些第三方中间件可以根据具体需求选择使用，例如redux-logger用于打印action和state的日志、redux-persist用于持久化存储等。

总结来说，通过使用Redux中间件，我们可以更好地组织和管理应用的状态更新逻辑，使得Reducer不再显得多余。不同的中间件适用于不同的场景，可以根据具体需求选择合适的中间件来优化代码结构和提升开发效率。

相关搜索:在React Redux中更新嵌套状态，语法有什么问题？有没有更好的方法来写这个reducer？有没有一种方法可以将一个XML包含到另一个XML中，尽管我使用的是MigraDocXML命名空间，这阻止了我用传统的方式来做这件事有没有更好的方法来编写这样的jQuery代码，将_blank属性添加到目标链接(在新选项卡中打开它们)？机器学习服务平台年末活动机器学习工具年末活动工业 AI 训练系统年末活动工业 AI 推理系统年末活动工业 AI 应用模型年末活动工业 AI 平台年末活动 AI 应用开发年末活动

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

从零开始的 Redux

Redux 是什么 Redux 是 JavaScript 状态容器，提供可预测化的状态管理。目前一般与 React 配合使用。React 提供了 React-redux 库，两者能轻松结合起来。...简单上手在 Redux 中，状态 (state) 是通过 action 改变的，而 action 其实调用了 reducer 方法。...对比 Vuex，一般在 Vuex 中我们通过 action 提交 (commit) 一个 state 的更改。而在 Redux 中是 action 调用了 reducer。...通过 getState 方法我们可以拿到 store 中存储的值，比如我想拿到 change reducer 中的 state。...不知道有没有注意到开始从根组件传参只能传一层，违背了 store 随时随地使用的原理。这时候 react-redux 登场了。

3554 0

react项目架构之路初探

如果采用传统的开发方式，mvc的架构不明确，页面（view）和逻辑层（controller）紧耦合，代码逻辑重复性工作较多，使用更改state的方式去渲染页面，如果遇到组件之间的传值，数据流通不明确...redux 三大原则：单一数据源，只读的state，使用纯函数来修改 redux是一款状态管理库，并且提供了react-redux来与react紧密结合，核心部分为Store，Action，Reducer...(dispatch,getState),在函数体内进行业务逻辑的封装 redux-thunk的缺点： action的形式不统一，异步操作太分散，分散在了各个action中 redux-saga本质是一个可以自执行的...声明mumation的方式我们使用了reduxsauce插件更好的标识不同的action 同时使用Immutable 插件 1....解决了共享数据的可变状态 2. 实现了时间旅行的功能（对比与git提交） 3.

2.4K1 0

单向数据流-从共享状态管理：fluxreduxvuex漫谈异步数据处理

redux与flux对比 Flux 中 Store 是各自为战的，每个 Store 只对对应的 View 负责，每次更新都只通知对应的View Redux 中各子 Reducer 都是由根 Reducer...——React利用React-Redux将它与React框架结合起来。...我们的action越来越复杂，payload越来越长，当然我们可以分离开来单独建立文件去处理逻辑，但是实质上还是对redux的action和reducer进行了污染，让它们变得不纯粹了，action就应该作为一个信号...，而不是处理逻辑，reducer里面处理要好一些，但是同样会生出几个多余的action类型进行处理，而且也只能是promise，不能做复杂的业务处理。...React-Redux vs VUEX 对比分析和组件结合方式的差异通过VUEX全局插件的使用，结合将store传入根实例的过程，就可以使得store对象在运行时存在于任何vue组件中。

3.6K4 0

【React】211- 2019 React Redux 完全指南

怎么把这些全都与 React 结合起来构建一个可运行的应用？你可以花几个小时阅读博客以及尝试从复杂的“真实世界”应用中研习以将它拼凑起来。...在本篇 Redux 教程中，我会渐进地解释如何将 Redux 与 React 搭配使用 —— 从简单的 React 开始 —— 以及一个非常简单的 React + Redux 案例。...它也会教你更多关于函数式编程的知识。内置 Redux 替代品如果 Redux 对你来说太过繁琐了，可以看看这些替代品。它们内置在 React 中。...学习 Redux，从简单 React 开始我们将采用增量的方法，从带有组件 state 的简单 React 应用开始，一点点添加 Redux，以及解决过程中遇到的错误。...你可以把它想成一个游戏，你唯一能做的事就是 return { … }。这是个有趣的游戏。开始会有点恼人。但是通过练习你会变得更好。

4.2K2 0

深入理解Redux数据更新机制：数据流管理的核心原理

Redux作为一个流行的状态管理库，提供了一种简洁而强大的数据更新机制，成为了许多开发者的首选。本文将深入探讨Redux的数据更新机制，帮助读者更好地理解Redux的工作原理并应用于实际项目中。...Redux是一个非常流行的JavaScript状态管理库，它可以帮助我们更好地组织和管理React应用程序中的数据流。本文将介绍Redux的数据更新机制，并讨论如何使用它来管理应用程序中的状态。...Redux的数据流是单向的，从store开始，通过dispatch一个action来触发数据的更新，然后通过reducer来更新store中的数据。...是两个可选的参数，它们分别用于指定将Redux状态映射到组件的属性上，以及将Redux动作映射到组件的属性上。...dispatch 是 Redux Store 的一个方法，用于分发动作。在 mapDispatchToProps 中，我们可以将动作包装成回调函数或者直接将它们分发到 Redux。

3544 0

【offer 收割计划】你知道为什么 reducer 最好是一个纯函数吗？

首先如果 redux 中的 reducer 如果不是一个纯函数的话会造成什么后果呢？...，来看看它到底是什么原因造成的，Redux 接收一个 state 对象，然后通过 for 循环，将 state 的每一部分传递给对于的 reducer ，如果发生任何改变， reducer 将返回一个新的对象...原因是，如果这里采用了深比较的方式，当比较的次数很多时，性能消耗特别大，因此 redux 对 reducer 做了一个规定，无论发生什么变化时，都需要返回一个新的对象；没有变化时，返回旧的对象。...这样就能继续沿用浅比较的方式，很好的减少了性能的损耗同时在 redux 的英文官网中给 reducers 定制了一套规则：对应地址 We said earlier that reducers must...state 总结通过这几道面试题，我们复习了 JavaScript 中的循环语句，也区分了 splice 和 slice 而又深入理解 redux 中 reducer 的工作原理，这对我自己来说提升还是很大的

9942 0

Redux入门实战——todo-list2.0实现

近期，个人学习了一下Redux，又将该项目使用 React+Redux的方式进行了实现。本片内容记录以下实践的过程。...通常由React Redux生成大部分的组件都应该是展示型的，但一般需要少数的几个容器组件把它们和 Redux store 连接起来。.../App'; //创建store,将根Reducer传入store中。...根reducer：随之项目的不断增大，程序state的越来越复杂，只用一个 reducer 是很难满足实际需求的，redux中采用将 reducer 进行拆分，最终在状态改变之前通过根 reducer...将各个拆分的子 reducer 进行合并方式来进行处理。

1.3K1 0

医疗数字阅片-医学影像-Module: Panel-自定义面板-中二-Redux&react-redux状态管理详解

而 React-redux 就是把 Redux 这种架构模式和 React.js 结合起来的一个库，就是 Redux 架构在 React.js 中的体现。...Action 处理现在我们已经确定了 state 对象的结构，就可以开始开发 reducer。reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。...明白了这些之后，就可以开始编写 reducer，并让它来处理之前定义过的 action。我们将以指定 state 的初始状态作为开始。...主 reducer 并不需要设置初始化时完整的 state。初始时，如果传入 undefined, 子 reducer 将负责返回它们的默认值。...随着应用的膨胀，我们还可以将拆分后的 reducer 放到不同的文件中, 以保持其独立性并用于专门处理不同的数据域。

3.5K1 0

Redux入门实战——todo-list2.0实现

近期，个人学习了一下Redux，又将该项目使用 React+Redux的方式进行了实现。本片内容记录以下实践的过程。...，但一般需要少数的几个容器组件把它们和 Redux store 连接起来。.../App'; //创建store,将根Reducer传入store中。...根reducer：随之项目的不断增大，程序state的越来越复杂，只用一个 reducer 是很难满足实际需求的，redux中采用将 reducer 进行拆分，最终在状态改变之前通过根 reducer...将各个拆分的子 reducer 进行合并方式来进行处理。

1.2K3 0

【干货】从零实现 react-redux

前面我们也介绍过 React 的组件通信，在大型应用中，处理好 React 组件通信和状态管理就显得非常重要。...在开始前，我已经将这篇文章的完整代码都整理到 GitHub 上，大家可以参考一下。 Redux：simple-redux React-redux：simple-react-redux 2....以 Vue 为例子，在刚开始的时候，Vue 官网首页写的卖点是数据驱动、组件化、MVVM 等等（现在首页已经改版了）。那么数据驱动的意思是什么呢？...subscribe 则是一个监听方法，它可以监听到 store 的变化，所以可以通过 subscribe 将 Redux 和其他框架结合起来。...所以 dispatch 做的事情就是将 action 传给 reducer 函数，将执行后的结果设置为新的 store，然后执行 listeners 中的方法。

1.7K1 0

【React】717- 从零实现 React-Redux

前面我们也介绍过 React 的组件通信，在大型应用中，处理好 React 组件通信和状态管理就显得非常重要。...在开始前，我已经将这篇文章的完整代码都整理到 GitHub 上，大家可以参考一下。 Redux：simple-redux React-redux：simple-react-redux 2....以 Vue 为例子，在刚开始的时候，Vue 官网首页写的卖点是数据驱动、组件化、MVVM 等等（现在首页已经改版了）。那么数据驱动的意思是什么呢？...subscribe 则是一个监听方法，它可以监听到 store 的变化，所以可以通过 subscribe 将 Redux 和其他框架结合起来。...所以 dispatch 做的事情就是将 action 传给 reducer 函数，将执行后的结果设置为新的 store，然后执行 listeners 中的方法。

1.2K1 0

优雅地乱玩 Redux-1-Getting Started

Reducer接收Action 3. Root Reducer会将所有sub reducer的结果给结合起来并返回 4....Redux会保存最后结合起来了的State并且调用各个监听器 Key Concepts Reducer 关于多个同级Reducer Store 个人笔记, 基于官方英文教程, 添加了一些批注...Root Reducer 会将所有 sub reducer 的结果给结合起来并返回参考下文提到的combineReducers()的使用示例 4....Redux 会保存最后结合起来了的 State 并且调用各个监听器现在这个时候已经获取到了下一个状态了如果我使用store.subscribe(listener)注册了个监听器，会在这个时候被调用...将状态变化的请求提交给 reducer 来处理, reducer 仅仅返回下一个状态 pure function: 可以根据传入的值预测结果，并且不会影响其他值, 即不改变传入的值也不会创建闭包

2122 0

深入理解redux

前沿在使用 react 的过程中，通常我们会通过 props 将父组件的一些数据传递到子组件，兄弟组件传递数据通过一个共同的父级，子传父可以通过回调函数来进行传递，当然这都是比较理想的情况，业务中往往不可能仅仅这样简单...中的值会不断叠加一般 context 的应用场景是在主题颜色、当前登陆账户信息、路由等既然 context 存在这样那样的问题，那有没有好一点的方式呢？...小型应用很容易被这个复杂化的设计提升项目本身的难度，最主要的一点，业界已经有较好的方式，弥补了这些不足，比如我们要说的 redux，还有较好的 mobx，它们更简单，高效，易学习 Redux 既然 redux...，有了 reducer，我们需要创建一个 store，方式也很简单，通过 redux 提供的 createStore 进行创建，然后通过 subscribe 进行订阅，当 store 的数据发生变化的时候就会触发订阅的回调函数...给你提供了立即可用的 applyMiddleware 直接组合你的中间件 react-redux 有了 redux，要把 react 和 redux 进行较好的结合，就像刚开始提到的，如果仅仅是数据传递

6655 0

redux、mobx、concent特性大比拼, 看后生如何对局前辈

，本文主要说的和react搭配使用的对比效果，所以下文里提到的redux、mobx暗含了react-redux、mobx-react这些让它们能够在react中发挥功能的绑定库，而concent本身是为了...[gdi5irk56l.png] 介绍完三者的背景，我们的舞台正式交给它们，开始一轮轮角逐，看谁到最后会是你最中意的范儿？...里的一个reducer块，聚合了数据、衍生数据、修改行为)，mobx的store获取方式有多种，例如在需要用的地方直接引入放到成员变量上 import someStore from 'models/foo...但是由于concent提供setup接口，我们可以利用它只会在初始渲染前执行一次的能力，将这些动作函数放置到setup内部定义为静态函数，避免重复定义，所以一个更好的函数组件应为 import * as...但是redux存在的一个问题是，如果视图里某一刻已经不再使用某个状态了，它不该被渲染却被渲染了，mobx携带得基于运行时获取到ui对数据的最小订阅子集理念优雅的解决了这个问题，但是concent更近一步将依赖收集行为隐藏的更优雅

4.5K6 1

数据流管理方案 | Redux 和 MobX 哪个更好？

假如父组件传递给子组件的是一个绑定了自身上下文的函数，那么子组件在调用该函数时，就可以将想要交给父组件的数据以函数入参的形式给出去，以此来间接地实现数据从子组件到父组件的流动。 ?...Provider 作为数据的提供方，可以将数据下发给自身组件树中任意层级的 Consumer。注意：Cosumer 不仅能够读取到 Provider 下发的数据，还能读取到这些数据后续的更新。...我们先来看看它们各自代表什么： store：就好比饮水机里的“水”，它是一个单一的数据源，而且是只读的。 action：人如其名，是 “动作” 的意思，它是对变化的描述。...使用 createStore 来完成 store 对象的创建。 ? createStore 方法是一切的开始，它接收三个入参：reducer、初始状态内容、指定中间件。...一般来说，只有 reducer 是你不得不传的。下面我们就看看 reducer 的编码形态是什么样的。 2. reducer 的作用是将新的 state 返回给 store。

1.9K2 1

手写一个Redux，深入理解其原理

有时候我们过于关注使用，只记住了各种使用方式，反而忽略了他们的核心原理，但是如果我们想真正的提高技术，最好还是一个一个搞清楚，比如Redux和React-Redux看起来很像，但是他们的核心理念和关注点是不同的...，Redux其实只是一个单纯状态管理库，没有任何界面相关的东西，React-Redux关注的是怎么将Redux跟React结合起来，用到了一些React的API。...本身就是一个单纯的状态机，Store存放了所有的状态，Action是一个改变状态的通知，Reducer接收到通知就更改Store中对应的状态。...的核心功能了，所以我们手写的第一个目标就是替换这个例子中的Redux。...比如我们最开始那个牛奶仓库，由于我们的业务发展很好，我们又增加了一个放大米的仓库，我们可以为这两个仓库创建自己的reducer，然后将他们组合起来，使用方法如下： import { createStore

4774 1

翻译 | Thingking in Redux（如果你只了解MVC）

一旦你开始学习React-Natvie（或React），在有人向你提及Redux之前，你大概只落后了3个stack overflow的问题，或者medium.com上几篇博客的距离。你当然很高兴了。...你开始理解state和props的区别了，你知道了componentDidMount是干啥的了，你甚至懂得了怎样合理地创建一个可复用组件。...注意我们是如何将value传入的。这么做是因为reducer已经持有了该value值。另外，这里也没有payload。这么做的原因是因为reducer并不需要。...在mapDispatchToProps函数中，我们将action处理函数映射到我们的容器，这样我们就能将它们传入到展示组件中去了。...是react-redux中的connect函数神奇的实现了这些功能。

1.3K10 0

「前端架构」Redux vs.MobX的权威指南

在这篇文章中，我们将研究每个库以及它们是如何匹配的。本文假设您对web应用程序中的状态管理工作有一个基本的了解。普通JavaScript和Redux框架都适用于普通或不可知的框架。...另外，MobX中有很多事情是在幕后完成的，为开发人员创造了更好的学习体验。您不必担心状态的规范化或实现类似Thunks的概念。由于已经内置了抽象，因此编写的代码更少。...以这种方式分离存储区的好处是，您也可以在其他应用程序中重用该域。UI存储将特定于当前应用程序。获奖者：Redux 这个类别的赢家是主观的；这取决于开发者的偏好。...如果您有兴趣了解更多关于纯函数以及它们在Redux中如何操作的信息，您可以阅读本文以获得更好的理解。这是Redux最好的特性之一。...Redux附带了reduxdev工具，供成千上万的开发人员使用。它为调试Redux代码提供了惊人的支持。 MobX还提供开发人员工具，但它们没有Redux提供的相同质量的调试支持。

1.5K3 0

彻底让你理解redux

从一开始我们就说明下一个概念: reducer决定了state的最终格式。 reducer是一个纯函数，也就是说，只要传入参数相同，返回计算得到的下一个 state 就一定相同。...combineReducers() 所做的只是生成一个函数，这个函数来调用你的一系列 reducer，每个 reducer 根据它们的 key 来筛选出 state 中的一部分数据并处理，然后这个生成的函数再将所有...react-redux将组建分成了两大类，UI组建和容器组建。...说白了，这个口，就是connect，而redux中的所有的组件都是在罐子外面的。...不知道这么通俗的解释有没有说明白 (T_T) 所以这样看来，组件通过container包装以后和redux就可以说是完全隔绝了，组件就是做组件的事情，redux就是做redux的事情。

4951 0

俺好像看懂了公司前端代码

起初的想法，Vue有自己单独的状态管理器Vuex，React也可以用Redux来管理状态；Vue提供了混入(mixins)的开发方式，虽然React起初也有混入的功能，后来被舍弃掉了，但是React可以通过高阶组件来实现混入的功能...而在Redux中主要有Reducer和Action，Reducer是一个纯函数，根据不同的Action返回不同的状态，Action则是用于改变状态唯一途径。...最后将生成的reducers交给redux管理，actions则为组件提供调用。actions函数里面有三步，包括请求前，请求中和请求后对状态的处理。...vuex里面有四个辅助函数这个react-redux要登场了。react-redux提供了一个connect，它是一个高阶组件，接收 React 组件作为输入，输出一个新的 React 组件。...我们这里需要自己封装一个高阶组件，里面调用react-redux提供的connect函数将state和dispatch映射到组件的props,此外还需要定义两个函数映射到props中，一个是用于调用接口的函数

1.3K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭