开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我在一个文件中写了一个reducer和action，这是一个好的实践吗？

写一个reducer和action是使用Redux进行状态管理的一个常见实践。Redux是一个用于JavaScript应用程序的可预测状态容器。通过使用reducer和action来管理应用程序的状态，可以使应用程序更加可维护、可测试和可扩展。

Reducer是一个纯函数，用于根据当前的state和action来计算新的state。它接收旧的state和action作为参数，并返回一个新的state。Reducer应该是一个纯函数，意味着它不应该有任何副作用，并且对相同的输入始终产生相同的输出。在Redux中，通常会将reducer放在一个单独的文件中。

Action是一个描述发生了什么的普通对象。它们是触发state变化的唯一途径。通过派发一个action，Redux会将该action传递给reducer，从而更新应用程序的状态。Action通常以一个函数的形式定义，并且可以包含一些payload数据，用于更新state。

使用reducer和action的好处包括：

单一数据源：Redux的状态是存储在一个单一的store中，这样可以方便地追踪和调试应用程序的状态变化。
可预测性：Redux的状态变化是通过派发action来触发的，每个action都会被传递给reducer进行处理，这使得应用程序的状态变化是可预测的。
可维护性：将应用程序的状态管理抽离到reducer和action中，可以使代码更加模块化和易于维护。
可测试性：由于reducer和action是纯函数，所以可以很容易地编写单元测试来验证它们的行为。
扩展性：通过定义不同的action和reducer，可以轻松地扩展应用程序的功能和状态管理。

推荐的腾讯云相关产品和产品介绍链接地址：

云函数（Serverless Cloud Function）：腾讯云函数是无服务器的云计算产品，可以帮助开发者更轻松地编写和部署各种类型的应用程序。详情请参考：https://cloud.tencent.com/product/scf
云数据库MySQL版（TencentDB for MySQL）：腾讯云数据库MySQL版是一种可扩展、高性能、高可靠性的关系型数据库服务。详情请参考：https://cloud.tencent.com/product/cdb_mysql
腾讯云容器服务（TKE）：腾讯云容器服务是基于Kubernetes的容器化应用管理解决方案，提供高度可扩展的容器集群管理能力。详情请参考：https://cloud.tencent.com/product/tke

相关搜索:Fk在不同的模式中，这是一个很好的实践吗？Python的非本地关键字-这是一个好的实践吗？Javax Websocket使用路径参数提交登录数据，这是一个好的实践吗？如果以递归方式返回一个函数，会发生什么情况?这是一个好的实践吗？这在Python中是正常使用的吗?/是一个好的实践吗？这是在mysql中为同一个表创建多个视图的良好实践(性能方面)吗我如何制作一个文件，加载一个变量的酸洗文件，打印它，给你一个添加和重新挑选的选项？在repl.it上这是可能的吗？这是读取一个充满双精度的二进制文件的好方法吗？我试图通过py文件传递一个全局变量。这是正确的吗？ASP.NET:在会话中存储类属性和使用会话处理程序 - 这是一个好的设计吗？我可以在一个命令中读取FITS文件吗？我如何使用好的实践在javascript中声明一个矩阵？我可以在同一个AppService中运行一个节点和aspnetcore吗？如果我在程序中写了一个没有goto语句的标签，会发生什么？在ExecuteStoreQuery EF中执行存储过程.这是EF中的一个错误吗？在Android中重用recyclerview的布局和适配器是一个很好的实践吗？我可以在zeppelin的一个`sh`命令中包含一个变量吗？在我的.js文件中包含一个变量我可以在VUE中的单个文件组件中定义一个组件吗？在更高的层中编写接口是否被认为是一个好的实践？

相关搜索:

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

有帮助

没帮助

相关·内容

ilus: 这是我写的一个轻量级全基因组（WGS）和全外显子（WES）最佳实践分析流程生成器

这个工具一年前写了第一个版本（当时只在我的知识星球里分享过一次），过程中也调试了碰到的问题，日趋完善，后续还将迭代更新。...这个工具我将其命名为 ilus (/i:ləs/)，这是我看过的一部美剧——《无垠的太空》中通过星环抵达的第一个系外类地行星的名字。...因此，作为一个轻量级的工具，我在设计 ilus 的时候从一开始就没将自动投递和运行任务的功能考虑在内。我更希望它作为一个框架程序，严格依据你的输入数据和配置文件的信息，生成符合你分析需求的流程脚本。...因此，我在 ilus 中还同时实现了一个专门用来检查任务作业完成状态的程序，具体用法同样参考下文 WGS 例子。...此外，要注意配置文件中的 variant_calling_interval 参数。这是一个专门用来指定变异检测区间的参数。

2.5K4 1

超性感的React Hooks（七）useReducer

1 我用最简单的递增递减的案例，来和大家分享一下它的用法。最终实现效果如图。 ?...初始化设置为0 在redux中，我们称这样的状态值为Store const initialState: number = 0; 然后我们需要定义一个Reducer，Reducer是一个函数。...在这个简单的案例中，Action被我们定义成为一个字符串，reducer内部会根据不同的字符串，执行不同的修改状态逻辑。...一个大型项目中，需要修改的状态至少数以千计，要维护这么多的Action，人都要疯。复杂度无法预知的Store 实践中的Store可不仅仅只是一个数字。...3 在Redux中，借助它提供的combineReducer方法，我们可以将多个Reducer合并为一个。这让我们在实践时，可以将整个大的Reducer进行拆分，以减少复杂度。

2.2K2 0

干货：大型互联网公司分布式缓存的优秀实践和线上案例在此我在推荐一个学习架构框架的学习体系：

优秀实践2 建议将使用缓存的业务进行分离，核心业务和非核心业务使用不同的缓存实例，从物理上进行隔离，如果有条件，则请对每个业务使用单独的实例或者集群，以减小应用之间互相影响的可能性。...优秀实践5 所有的缓存实例都需要添加监控，这是非常重要的，我们需要对慢查询、大对象、内存使用情况做可靠的监控。...原因：在应用程序中对使用的大量缓存key设置了同一个固定的失效时间，当缓存失效时，会造成在一段时间内同时访问数据库，造成数据库的压力较大。...如果你的分布式技术还不够过硬，经验还不够，且在工作中遇到瓶疾，技术提升不上去，我这里可以推荐给大家一个学习交流群：697579751 里面会分享一些资深架构师录制的视频录像：有Spring，MyBatis...还能领取免费的学习资源，目前受益良多在此我在推荐一个学习架构框架的学习体系：源码分析： ? 性能优化： ? 微服务架构： ? 分布式架构： ? 项目实战： ? 并发编程 ?

9916 0

react+redux+webpack教程2

为了简便，我们把整个登录页面作为一个组件，放在containers目录下。还记得前面说过containers和components目录吗？...在redux里，任何一个action都会在所有的reducer里过一遍，所以对于一个reducer来说实际上绝大多数情况action都不是它能处理的，最后还是返回当前状态值。觉得很低效吗？?...类型名称的常量现在都写到了action文件里，不过也许把所有这些常量放到一个单独的文件里比较好，这样在es6语法的帮助下就可以避免重复了。.../reducers这个文件（这是个目录，实际的文件是里面index.js），所以我们也需要把新写的reducer注册到这里面去。...在MVVM框架里只需要建立一个视图模型，用一对双大括号就能完成的事情，到react加redux里面为何如此大费周折？其实我是专门在展示完整的redux+react开发流程。

1.3K7 0

【THE LAST TIME】从 Redux 源码中学习它的范式

上篇：从 Redux 设计理念到源码分析本文续上篇，接着看 combineReducers、applyMiddleware和 compose 的设计与源码实现至于手写，其实也是非常简单，说白了，「去掉源码中严谨的校验...combineReducers 从上一篇中我们知道，newState 是在 dispatch 的函数中，通过 currentReducer(currentState,action)拿到的。...虽然最终还是一个根，但是每一个枝放到不同的文件 or func 中处理，然后再来组织合并。（模块化有么有） combineReducers 并不是 redux 的核心，或者说这是一个辅助函数而已。...但是我个人还是喜欢这个功能的。它的作用就是把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数。...其实即使我们上面手写的 reverse 部分。 reduce 是 es5 的数组方法了，对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。

4003 0

56. 精读《重新思考 Redux》

经过长期实践，组件最好不要使用数据流，项目的数据流只用一个实例完全够用了，全局 dispatch 的设计其实更合理，而注入 dispatch 的设计看似追求技术极致，但忽略了业务使用场景，导致画蛇添足，...同步的场景，一个 reducer 函数就能处理，只有异步场景需要 effect action 处理掉异步部分，同步部分依然交给 reducer 函数，这两种 action 职责更清晰。...不再显示申明 action type 不要在用一个文件存储 Action 类型了，const ACTION_ONE = 'ACTION_ONE' 其实重复写了一遍字符串，直接用对象的 key 表示 action...; 其次使用 async 在 effects 函数中，使用 this.increment 函数调用方式，取代 put({type: "increment"})（dva），在 typescript 中拥有了类型支持...4 总结重复一下作者提出工具质量的公式：工具质量 = 工具节省的时间/使用工具消耗的时间如果一个工具能节省开发时间，但本身带来了很大使用成本，在想清楚如何减少使用成本之前，不要急着用在项目中，这是我得到的最大启发

4522 0

完全理解 redux（从零实现一个 redux）

我们来设置一个 plan 函数，接收现在的 state，和一个 action，返回经过改变后的新的 state。...记录日志我现在有一个需求，在每次修改 state 的时候，记录下来修改前的 state ，为什么修改了，以及修改后的 state。...文件，想把两个中间件独立到单独的文件中去。...会碰到什么问题吗？ loggerMiddleware 中包含了外部变量 store，导致我们无法把中间件独立出去。...总结到了最后，我想把 redux 中关键的名词列出来，你每个都知道是干啥的吗？

7642 0

Rematch: Redux 的重新设计

假设reducer与action类型匹配，那么我们可以对参数进行反转，这样每个reducer都是一个接受state 和action的纯函数。...一个简单的 action 到底是作为一个动态类型的对象、一个函数，还是一个 Promise？这难道不是一种拙劣的实践吗？如上图右边所示，难道我们就不能只使用 async/await ？ 4....不再有 action 类型（action.type）变量为什么我们的标准实践要把 action creator 和 reducer 区分开来呢？能否只用其中一个呢？...const ACTION_ONE = 'ACTION_ONE'是分离 action creators 和 reducers 的一个冗余产物。应将两者视为一体，并且不再需要文件导出类型的字符串。...Redux 与 Rematch 的对比 Redux 是一个出色的状态管理工具，有键全的中间件生态与出色的开发工具。 Rematch 在 Redux 的基础上构建并减少了样板代码和执行了一些最佳实践。

1.6K5 0

【React】360- 完全理解 redux（从零实现一个 redux）

我们来设置一个 plan 函数，接收现在的 state，和一个 action，返回经过改变后的新的 state。...记录日志我现在有一个需求，在每次修改 state 的时候，记录下来修改前的 state ，为什么修改了，以及修改后的 state。...文件，想把两个中间件独立到单独的文件中去。...会碰到什么问题吗？ loggerMiddleware 中包含了外部变量 store，导致我们无法把中间件独立出去。...总结到了最后，我想把 redux 中关键的名词列出来，你每个都知道是干啥的吗？

7612 0

完全理解 redux（从零实现一个 redux）

我们来设置一个 plan 函数，接收现在的 state，和一个 action，返回经过改变后的新的 state。...记录日志我现在有一个需求，在每次修改 state 的时候，记录下来修改前的 state ，为什么修改了，以及修改后的 state。...文件，想把两个中间件独立到单独的文件中去。...会碰到什么问题吗？ loggerMiddleware 中包含了外部变量 store，导致我们无法把中间件独立出去。...总结到了最后，我想把 redux 中关键的名词列出来，你每个都知道是干啥的吗？

8301 0

完全理解 redux（从零实现一个 redux）

我们来设置一个 plan 函数，接收现在的 state，和一个 action，返回经过改变后的新的 state。...记录日志我现在有一个需求，在每次修改 state 的时候，记录下来修改前的 state ，为什么修改了，以及修改后的 state。...文件，想把两个中间件独立到单独的文件中去。...会碰到什么问题吗？ loggerMiddleware 中包含了外部变量 store，导致我们无法把中间件独立出去。...总结到了最后，我想把 redux 中关键的名词列出来，你每个都知道是干啥的吗？

6362 0

深度理解Redux原理并实现一个redux

Redux的作用是什么Redux的作用在于实现状态传递、状态管理。在这里你可能会说了，如果是状态传递，那我props的传递不也是可以达到这样的效果吗？...context上下文方案不也是可以达到这样的效果吗？没错，是这样的，但是上述的两种方案是有局限性的。props方案只适用于父子组件传递状态。...store.js文件里面的createStore。reducer.js文件里面的cloneDeep、return state、state = initialValue。...各位同学可以看得到我在reducer中做了一次state的深克隆，这是为什么呢？...是因为在每一次的action中我们拿到的是同一个state的内存地址，我们的期望是不管你在switch中如何更改state但是我不希望在这一步就改变了公共状态中的count，只有在我return的时候才会去更改真正的公共状态

4131 0

完全理解 redux

我们来设置一个 plan 函数，接收现在的 state，和一个 action，返回经过改变后的新的 state。...记录日志我现在有一个需求，在每次修改 state 的时候，记录下来修改前的 state ，为什么修改了，以及修改后的 state。...文件，想把两个中间件独立到单独的文件中去。...会碰到什么问题吗？ loggerMiddleware 中包含了外部变量 store，导致我们无法把中间件独立出去。...总结到了最后，我想把 redux 中关键的名词列出来，你每个都知道是干啥的吗？

8942 0

深度理解Redux原理并实现一个redux_2023-02-28

Redux的作用是什么 Redux的作用在于实现状态传递、状态管理。在这里你可能会说了，如果是状态传递，那我props的传递不也是可以达到这样的效果吗？...context上下文方案不也是可以达到这样的效果吗？没错，是这样的，但是上述的两种方案是有局限性的。 props方案只适用于父子组件传递状态。...store.js文件里面的createStore。 reducer.js文件里面的cloneDeep、return state、state = initialValue。...各位同学可以看得到我在reducer中做了一次state的深克隆，这是为什么呢？...是因为在每一次的action中我们拿到的是同一个state的内存地址，我们的期望是不管你在switch中如何更改state但是我不希望在这一步就改变了公共状态中的count，只有在我return的时候才会去更改真正的公共状态

5114 0

React技术栈项目结构探究

React+Redux项目结构探索整理学习react技术栈相关知识，在写了一个电商AppDemo后，开始思考起该如何高效的组织react项目的项目结构。...中的示例写法，在刚开始学习的时候，我的很多学习demo也是按照这种方式去组织的代码结构这种结构最直观的就是，看起来非常的简单明了。...在《深入浅出React和Redux》一本书中，推荐的就是这种方式，真正的做到组件化，划分到组件、状态和行为都在同一个文件夹里。...对我来说，把这些相关的代码放在一个独立的文件中更方便，这样做还可以很容易的打包到软件库／包中。...但在使用Ducks结构时，action creators和reducer定义在同一个文件中，import *的导入方式会把reducer也导入进来（如果action types也被export，那么还会导入

9023 0

Taro 小程序开发大型实战（四）：使用 Hooks 版的 Redux 实现应用状态管理（上篇）

的中间件 redux-logger 外，还有两个额外的包，这是因为在 Taro 中，Redux 原绑定库 react-redux 被替换成了 @tarojs/redux 和 @tarojs/redux-h5...好的，复习了一下 Redux 的概念之后，我们马上来创建 Store，Redux 的最佳实践推荐我们在将 Store 保存在 store 文件夹中，我们在 src 文件夹下面创建 store 文件夹，并在其中创建...回到我们的页面逻辑，我们在底部有两个 Tab 栏，一个为 "首页"，一个为 "我的"，在 ”首页“ 里面主要是展示一列文章和允许添加文章等，在 ”我的“ 里面主要是允许用户进行登录并展示登录信息，所以整体上我们的逻辑有两类...中申明了 User Reducer 的初始状态 INITIAL_STATE，并将它赋值给 user 函数 state 的默认值，它接收待响应的 action，在 user 函数内部就是一个 switch...•分发 Action，当组件中 dispatch 一个 Action， combineReducers 会遍历 user Reducer 和 post Reducer，当匹配到任一 Reducer 的

2.2K2 1

我是这样在 React 中实践 TDD 编程的

准备好mock适配器后，我们就可以专注于初始化存储和并编写测试了。编写测试这是最有趣的部分。让我们开始TDD。首先，让我们创建并配置存储。在src目录中，创建一个名为index.js的新目录。...: rootReducer, }); 编写 userSlice “slice”是应用程序中单个特性的Redux reducer逻辑和动作的集合，通常定义在单个文件中。...让我们通过编写一个测试: 在src/store中创建一个名为slices的新目录。在这个目录中，添加一个名为user.test.js的文件。这个文件将包含我们将为userSlice编写的测试。...我们还没有定义userSlice、reducer和初始状态。在slice目录中，创建一个名为user.js的文件。...我们刚刚使用Redux、thunk和axios mock编写了一些测试对你来说有点挑战吗?添加诸如删除用户、修改以及检索用户等功能。结论在本文中，我们快速介绍了使用Redux的TDD。

1.9K3 0

不一样的React组件化

组件可以定义props和state，状态改变了引发组件的重绘，组件之间并不影响。我说好，那现在如果有一个组件，我从这个工程拷出来，粘贴到另一个工程，然后代码跑不起来了。...反向依赖在一般的React实践中，视图层和数据层的依赖都是正向的。视图层的正向依赖可以举例为：组件B是组件A的子元素，那么需要再组件A中显示声明组件B的存在。 import B from '....但凡使用React的工程，都会选择一个状态管理工具。Redux使用者较多，我们也是其中一员。Redux中使用action和reducer的概念进行事件分发和数据组装。...然后创建对应的看起来差不多的reducer.js，引用action.js中的那个常量actiontype。这波操作从我最开始接触reducer的时候就觉得过于恶心。...禁止依赖检查在我们的组件化中，依赖并不是直接引用的。会存在一个完全解耦的依赖声明。

8443 0

深入理解redux

第二个原因是最近面试的过程中，发现很多候选人对redux的理解很浅，甚至有错误的理解。真正理解redux的思想的人非常好，更不要说理解它其中的精妙设计了。因此就有了这篇文章的诞生。...state通过闭包的形式存放在redux store中，保证其是只读的。如果你想要更改state，只能通过发送action进行，action本质上就是一个普通的对象。...被要求很关键，因为reducer并不是定义在redux中的一个东西。而是用户传进来的一个方法。...日常工作我们也会用到reduce函数，它是一个高阶函数。reduce一直是计算机领域中一个非常重要的概念。 reducer和reduce名字非常像，这是巧合吗？...首先redux通过createStore生成了一个原始的store(没有被enhance)，然后最后将原始store的dispatch改写了，在调用原生的reducer之间,插入中间件逻辑(中间件链会顺序依次执行

9472 0

Redux的中间件Middleware不难，我信了^_^

Redux的action和reducer已经足够复杂了，现在还需要理解Redux的中间件。为什么Redux的存在有何意义？为什么Redux的中间件有这么多层的函数返回？...写在前面：本文其实就是我理解Redux中间件的一个思考过程，中间不免来自我个人的吐槽，大家看看乐乐就好。我们为什么要用中间件？我们为什么要用中间件？这个问题提的好！...这个时候难道我们要一个个去注释删除吗？不，我不干，这样可能还会改错。那么我们将此功能独立出来试试，这样不就可以实现复用了。将公用代码写入一个方法，然后变化的参数提取出来。...这里我写的中间件的功能是是如果action是函数，那么就返回函数的执行结果，并且向函数中传入dispatch和getState方法。...这样就可以在action函数中调用dispatch了。机智如你一定发现了这个就是异步的一个实现，也就是redux-thunk的基本逻辑。（其实就是参照redux-thunk写的。）

5384 1

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭