开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

将Hooks与Redux一起使用-不好的做法？

将Hooks与Redux一起使用的不好做法是直接在组件中使用Redux的store对象，而不是使用React-Redux提供的connect函数。

使用Hooks和Redux可以帮助我们管理组件的状态和全局状态。Hooks是React 16.8版本引入的新特性，它允许我们在函数组件中使用状态和其他React特性。Redux是一个用于管理应用程序状态的JavaScript库。

在使用Hooks和Redux时，我们应该遵循以下最佳实践：

使用React-Redux库：React-Redux库提供了connect函数，它可以将Redux的store和组件连接起来。通过connect函数，我们可以将Redux的状态映射到组件的props中，并且可以使用dispatch函数来触发Redux的action。
使用useSelector和useDispatch：React-Redux库还提供了useSelector和useDispatch这两个Hooks。useSelector允许我们从Redux的store中选择需要的状态，并将其作为组件的props。useDispatch允许我们在组件中触发Redux的action。
将逻辑与UI分离：在使用Hooks和Redux时，我们应该将逻辑与UI分离。将逻辑放在Redux的action和reducer中，将UI放在组件中。这样可以使代码更加清晰和可维护。
避免直接访问Redux的store对象：直接在组件中使用Redux的store对象是一个不好的做法。这样做会导致组件与Redux紧密耦合，难以进行单元测试和重构。应该使用React-Redux提供的connect函数或Hooks来连接组件和Redux的store。

综上所述，将Hooks与Redux一起使用时，应该使用React-Redux提供的connect函数或Hooks来连接组件和Redux的store，而不是直接在组件中使用Redux的store对象。这样可以遵循最佳实践，使代码更加清晰、可维护，并且方便进行单元测试和重构。

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

腾讯云官网：https://cloud.tencent.com/
云服务器CVM：https://cloud.tencent.com/product/cvm
云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
云原生容器服务TKE：https://cloud.tencent.com/product/tke
人工智能AI：https://cloud.tencent.com/product/ai
物联网IoT Hub：https://cloud.tencent.com/product/iothub
移动开发移动推送：https://cloud.tencent.com/product/umeng_push
对象存储COS：https://cloud.tencent.com/product/cos
区块链服务BCS：https://cloud.tencent.com/product/bcs
腾讯云元宇宙：https://cloud.tencent.com/solution/virtual-universe

相关搜索:React Hooks :为什么将set state函数传递给子组件是不好的做法？使用Cloud Firestore的StreamBuilder是不好的做法？在Python中使用与kwarg参数同名的参数是不好的做法吗？在整个应用程序中使用Redux选择器是不是不好的做法？如何将getState与redux thunk一起使用如何将HOC与redux compose和Typescript一起使用如何将React Hooks与react-native-tab-view一起使用如何将setInterval与redux-thunk一起使用？如何将setTimeout()与React Hooks、useEffect和setState一起使用？将antd与redux-form一起使用

相关搜索:

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

有帮助

没帮助

相关·内容

如何将Redux与React Hooks一起使用

在本文中，让我们一起来学习如何将Redux与React Hooks一起使用。 React Redux在2019年6月11日发布的7.1版中提供了对Hooks的支持。...这意味着我们可以在函数组件中将Redux与Hooks一起使用，而不是使用高阶组件（HOC）。什么是Hook？...回到正题本文的原始目的是介绍如何将Redux与Hooks结合使用。 React Redux现在提供了useSelector和useDispatch Hook，可以使用它们代替connect。...在该示例中，我们将使用connect的React组件转换为使用Hooks的组件。...不使用高阶组件的另一个好处是不再产生多余的"虚拟DOM包装"： ? 最后现在，我们已经了解和学习了Hooks的基础知识，以及如何将它们与Redux一起使用。编程愉快！

6.9K3 0

使用hooks重构antd pro的想象力（三）我是如何利用hooks干掉redux的

因此我们可以利用自定义hooks的思维，将这个逻辑片段抽离出来，封装成为一个自定义hooks useInitial。...使用时，只需要一句代码，我们就能够获取到我们想要的数据，状态，对应的操作方法等。...通过引入hooks，并借助巧妙的组件化思维，我们将复杂的页面一层层变得非常简单。最后思考一个问题：先看图：我们仔细思考Ant Design Pro项目的整个结构。哪些元素是属于共有的？...意味着，在这样的组织架构下，我们完全可以不再使用dva中的那一套数据逻辑，redux可以不用了，redux-saga可以不用了，甚至useDispatch可以不用了，useSelecotr也可以不用了，...仅仅只使用最简单的hooks的方式来维护数据就足够了。

1.3K1 0

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

版的 Redux 实现大型应用状态管理（上篇）[4]：使用 Hooks 版的 Redux 实现了 user 逻辑的状态管理重构这是使用 Hooks 版的 Redux 重构状态管理的下篇，在上篇中我们实现了...最后我们导出了 useDispatch Hooks，使用 useDispatch Hooks 生成的 dispatch 函数的引用来发起更新 Redux store 的 action 来更新本地数据，type...nickName 抽取到 Redux store 保存的状态中，所以之前从父组件获取的 props.isLogged 判断是否登录的信息，我们移动到组件内部来，使用 useSelector Hooks...为 SET_LOGIN_INFO 的 action，将这份登录信息保存在 Redux store 里面以供后续使用。...接着我们导入并使用 useSelector Hooks 获取了保存在 Redux store 中的 posts 属性，然后使用上一步获取到的 postId，来获取我们最终要渲染的 post 属性。

2K3 0

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

在这一篇中，我们将开始用 Redux 重构，因为此次重构涉及的改动文件有点多，所以这一步使用 Redux 重构我们分两篇文章来讲解，这篇是上篇。...在这一节中，我们将结合 React Hooks 和 Redux 来重构我们状态管理。...Hooks 版的 Action 初尝鲜准备好了 Store 和 Reducer，又整合了 Redux 和 React，是时候来体验一下 Redux 状态管理容器的先进性了，不过为了使用 Hooks 版本的...useDispatch Hooks 这个 Hooks 返回 Redux store 的 dispatch 引用。你可以使用它来 dispatch actions。...小结在这一篇文章中，我们讲解了 user 逻辑的状态管理的重构，受限于篇幅，我们的 user 逻辑还剩下 Footer 部分没有讲解，在下一篇中，我们将首先讲解使用 Hooks 版的 Redux 来重构

2.1K2 1

如何将CocoaPods与多个Framework子项目一起使用

所有项目/目标都使用CocoaPods管理第三方库。解决办法 platform :ios, '8.0' # 这里标记使用Framework use_frameworks!...workspace 'MAIN_APP.xcworkspace' # 这里调用的全部库 def shared_pods pod 'CYLTabBarController','~> 1.28.3'

3.9K1 0

React Hooks 深入系列 —— 设计模式

与 TypeScript 一起使用时, 需要对 defaultValue 做额外声明处理; 此外 React Team 表示 Class 在机器编译优化方面也不是很理想。...Hooks 之间 setState 是异步还是同步的表现进行对比, 可以先对以下 4 种情形 render 输出的个数进行观察分析: 是否能使用 React Hooks 替代 Redux 在 React...具体原因可见 react-redux v7 回退到订阅的原因 Hooks 中如何获取先前的 props 以及 state React 官方在未来很可能会提供一个 usePrevious 的 hooks...方法一: 将函数放入 useEffect 中, 同时将相关属性放入依赖项中。因为在依赖中改变的相关属性一目了然, 所以这也是首推的做法。..., 它一般结合 useCallback 一起使用来处理某些函数计算量较大的函数。

1.9K2 0

【小狮子前端】「Redux」概念理解+实战上手（内含大量实例）

四、react-redux 可以看到上面我们并没有使用到react-redux，虽然能实现功能，但细心会发现我是直接拿的store，组件多的话个个拿store，这样不好。...哈哈哈怎么可能呢对于已经使用redux的：首先在redux没有给出对hooks较好支持之前，大多不会为了hooks来完全重构项目吧，顺便一讲重构可能造成的问题： - 失去很多connect()提供的自动引用缓存...react-redux发布了新的版本，与之前的contextAPI分离，提供对hooks的支持，那这不就更香了新的redux带来的改变不再需要使用 mapStateToProps，mapDispatchToProps...和connect来维护单独的container组件和UI组件，而是在组件中直接使用redux提供的hooks,读取redux中的state。...可以将任何现有的自定义hooks与redux集成，而不是将通过hooks创建的state，作为参数传递给其他hooks。

1.3K0 0

年前端react面试打怪升级之路

，react更快使用场景：React配合Redux架构适合大规模多人协作复杂项目，Vue适合小快的项目开发风格：react推荐做法jsx + inline style把html和css都写在js了vue...这样简单的单向数据流支撑起了 React 中的数据可控性。当项目越来越大的时候，管理数据的事件或回调函数将越来越多，也将越来越不好管理。管理不断变化的 state 非常困难。...主要解决的问题：单纯的Redux只是一个状态机，是没有UI呈现的，react- redux作用是将Redux的状态机和React的UI呈现绑定在一起，当你dispatch action改变state的时候...这就意味着从原则上来讲，React 的数据应该总是紧紧地和渲染绑定在一起的，而类组件做不到这一点。函数组件就真正地将数据和渲染绑定到了一起。...函数组件是一个更加匹配其设计理念、也更有利于逻辑拆分与重用的组件表达形式。为了能让开发者更好的的去编写函数式组件。于是，React-Hooks 便应运而生。

2.2K1 0

React系列-自定义Hooks很简单

不明白Redux工作流的同学可以看看这篇Redux系列之分析中间件原理（附经验分享）为什么使用官方说法：在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值...变化很复杂，经常一个操作需要修改很多state，另一个好处是所有的state处理都集中到了一起，使得我们对state的变化更有掌控力，同时也更容易复用state逻辑变化代码，比如在其他函数中也需要触发登录...可以看到即使props没有变化，一旦组件上层最近的更新时，该 Hook 会触发重渲染,此时Memo就失效了 Hooks替代Redux 有了useReducer...MyProvider // 导出 connect connect：connect是一个高阶组件，提供了一个连接功能，可用于将组件连接到store,它提供了组件获取 store 中数据或者更新数据的接口...基础Hooks就是平时与业务无关的工具方法 useEffectOnce 该Hooks在函数组件只执行一次 const useEffectOnce = (effect) => { useEffect

2.1K2 0

Redux with Hooks

这些逻辑由于useEffect hook的引入而得以写在同一个地方，能有效避免一些常见的bug。有效减少与善变的this打交道。既然Hooks大法这么好，不赶紧上车试试怎么行呢？...问题我们先来看一段使用了Hooks的函数式组件结合React-Redux connect的用法： import React, { useEffect } from 'react'; import {...使用React-Redux的hooks APIs（推荐）既然前面几种方案或多或少都有些坑点，那么不妨尝试一下React Redux在v7.1.0版本为我们带来的官方hooks APIs，下面就展示下基本用法...总结 React Hooks给开发者带来了清爽的使用体验，一定程度上提升了键盘的寿命【并不，然而与原有的React-Redux connect相关APIs结合使用时，需要特别小心ownProps参数，很容易踩坑...此外，使用Hooks自建全局状态管理的方式在小项目中固然可行，然而想用在较大型的、正式的业务中，至少还要花费心思解决性能问题，而这个问题正是React-Redux等工具已经花费不少功夫帮我们解决了的，似乎并没有什么充分的理由要抛弃它们

3.3K6 0

如何使用Ubuntu 14.04上的Git Hooks将Hugo站点部署到生产环境

在本指南中，我们将向您展示如何设置一个系统git，您可以使用该系统将新内容自动部署到生产Web服务器。准备对于本指南，我们假设您已经启动并运行了Ubuntu 14.04计算机作为您的开发计算机。...这将允许我们轻松地将新内容推送到我们的生产服务器。回到你的Hugo目录： cd ~/my-website 我们需要做的就是决定遥控器的名称。在本指南中，我们将使用prod。...我们将在生产服务器之后构建静态资产，而不是在我们的开发服务器上构建我们的内容git push。要做到这一点，我们需要安装Hugo。我们可以使用与开发机器相同的方法安装Hugo。...要创建此脚本，我们将在生产服务器上的裸存储库中进入名为hooks的目录。...但是，它们构成了易于维护的系统的基础，可以快速，轻松地在Web服务器上获取本地内容。由于部署过程是自动化的，因此您无需与服务器进行交互即可进行简单的git push更改。

2K2 0

React组件设计实践总结05 - 状态管理

例如异步数据获取: image.png 抑或者实现 Redux 的核心功能: 总结一下使用 hooks 作为状态管理器的优点: 极简。...将状态放在组件局部，就会跟着组件一起被销毁。如果希望状态跨越组件的生命周期，应该放到父组件或者 Redux Store 中....拿官方的图来看: image.png 响应式数据. 首先使用@observable 将数据转换为‘响应式数据’，类似于 Vue 的 data。...缺点就是不好序列化因为它们和页面的关联关系较弱，且可能在多个页面中被复用, 所以放在根目录的models/下....我们的做法是让所有 Store 都继承一个父类作为中间者，通过事件订阅模式在多个 Store 间进行数据通信缺乏组织。相对 Redux 而言, 状态过于零散，不加以约束，状态可以被随意修改。

2.1K3 1

手摸手教你基于Hooks 的 Redux 实战姿势

原文：Redux Crash Course with Hooks ?[1] 作者：Chris Achard 译者：博轩为保证文章的可读性，本文采用意译 ? 你对 Redux 感到困惑吗？...如果使用新的 Redux Hooks，会更加简单！这里是一个关于 Redux 的速成班，将配合 React 函数组件使用： 1....Redux 使您可以集中存放 JavaScript 应用程序的状态（数据）它最常与 React 一起使用（通过 react-redux ）这使您可以从树中的任何组件访问或更改状态。 ? 2....使用 react-redux 中的 Provider 来为你的应用提供 store。使用 Provider 来包装你的应用入口，以便应用程序中的任何组件都可以访问 store 中的数据 ? 4....要分派 action ，请使用 react-redux 中的自定义 hook： useDispatch 用一个 action 对象来调用 useDispatch，将传入 reducers 函数并运行，

1.5K2 0

Redux + Hooks 工程实践

点击上方关注前端技术江湖，一起学习，天天进步 “都 1202 年了怎么还有人在用 Redux”——这大概不少人看到这篇文章的第一反应。...Hooks 的本质是对逻辑的封装以及逻辑与 UI 代码的解耦。有了 Hooks 的加持能够让我们的 Redux React 项目更加简洁、易懂、扩展性更强。...而且 Hooks API 在 Redux 的最佳实践建议中目前是 Level 2 的强烈推荐使用级别。他拥有更简洁的表达方式，更干净的 React 节点数，更友好的 typescript 支持。...与 store 的交互被封装成了 Hooks 之后也可以很快在多个展示层被使用。这在复杂 B 端工作台场景下会展现出很大的价值。案例会有点长，以后有时间可以再补上。...主要想展示的是依赖 Hooks 的逻辑可封装能力的一种设计思路，Redux 黑的同学们不要过多纠结与这个选型，萝卜青菜各有所爱。

5121 0

79.精读《React Hooks》

看上去像 function 形式的 setState，其实这等价于依赖注入，与使用 setState 相比，这个组件是没有状态的。...Hooks 可以引用其他 Hooks。更容易将组件的 UI 与状态分离。...Redux Redux 的精髓就是 Reducer，而利用 React Hooks 可以轻松创建一个 Redux 机制： // 这就是 Redux function useReducer(reducer...而 react-redux 的 connect 部分做的事情与 Hook 调用一样： // 一个 Action function useTodos() { const [todos, dispatch...如果要真正实现一个 Redux 功能，也就是全局维持一个状态，任何组件 useReducer 都会访问到同一份数据，可以和 useContext 一起使用。

6963 0

精读《React Hooks》

看上去像 function 形式的 setState，其实这等价于依赖注入，与使用 setState 相比，这个组件是没有状态的。...Hooks 可以引用其他 Hooks。更容易将组件的 UI 与状态分离。...Redux Redux 的精髓就是 Reducer，而利用 React Hooks 可以轻松创建一个 Redux 机制： // 这就是 Redux function useReducer(reducer...而 react-redux 的 connect 部分做的事情与 Hook 调用一样： // 一个 Action function useTodos() { const [todos, dispatch...如果要真正实现一个 Redux 功能，也就是全局维持一个状态，任何组件 useReducer 都会访问到同一份数据，可以和 useContext 一起使用。

1.1K1 0

使用 React Hooks 代替 Redux

使用 React Hooks 代替 Redux 注：此文章立场不表示 Hooks 可以完全代替 Redux。因为 Redux 还有其他适用的场景和功能，只是在大部分场景可以用 Hooks 代替。...所以有 Redux、Mbox… 这样以数据管理为核心的库出现了。现实业务场景中，UI 与数据相辅相成。...在我最初学 React 的时候，原于成熟的方案、同事的推荐，是直接和 Redux 一起学习并且上手开发的。当时我就在想：React 为什么不能自己实现类似 Redux 那样的数据处理功能呢？...对于想学习 React 的同学，无疑是增加了 Redux 的学习成本，更加深了 React 的门槛与神秘值「这可不是一个优秀的开源库该有的特质」。...推出了新的 Hooks：useReducer，惊喜之外意料之中。这也就是这篇文章要讲的核心：使用 Hooks：useReducer 代替 Redux。数据流对比 redux ?

1.5K1 0

精读《unstated 与 unstated-next 源码》

与类 redux 库相比，这个库设计的别出心裁，而且这两个库源码行数都特别少，与 180 行的 unstated 相比，unstated-next 只有不到 40 行，但想象空间却更大，且用法符合直觉，...unstated 方案本质上利用了 setState，但将 setState 与 UI 剥离，并可以很方便的注入到任何组件中。...我们看到这个方案可以利用 React 官方提供的能力完全覆盖 Redux 中间件的能力，对 Redux 库实现了降维打击，所以下一代数据流方案随着 Hooks 的实现是真的存在的。...最后，相比 Redux 自身以及其生态库的理解成本（笔者不才，初学 Redux 以及其周边 middleware 时理解了好久），Hooks 的理解学习成本明显更小。...很多时候，人们排斥一个新技术，并不是因为新技术不好，而是这可能让自己多年精通的老手艺带来的 “竞争优势” 完全消失。

9751 0

使用React hooks处理复杂表单状态数据

自从React hooks发布以来已经有一段时间了，我很喜欢这个特性。这个hooks把我勾上了！ Hooks允许我们创建更小，可组合，可重用，更易管理的React组件。...您可能正在使用Hooks的一个用例是：使用useState或useReducer管理表单状态。...编写单独的useStates，然后为每个字段使用单独的更新函数是不切实际的。我们的另一个选择是hook，useReducer。我们来看一个例子。 ? 呃，不好。...这就是我们的做法。如果updateArg是一个函数，我们用当前状态调用它来计算新函数。无论我们从这个函数返回什么对象都成为我们的新状态。...因此，您可以使用包含要更新的状态片段的新对象调用updateState，并将其与旧状态合并并返回新状态。

3.3K2 0

社招前端一面react面试题汇总

React 将 render 函数返回的虚拟 DOM 树与老的进行比较，从而确定 DOM 要不要更新、怎么更新。...即：Hooks 组件（使用了Hooks的函数组件）有生命周期，而函数组件（未使用Hooks的函数组件）是没有生命周期的。...下面是具体的 class 与 Hooks 的生命周期对应关系：constructor：函数组件不需要构造函数，可以通过调用 **useState 来初始化 state**。...redux-thunk缺陷：样板代码过多：与redux本身⼀样，通常⼀个请求需要⼤量的代码，⽽且很多都是重复性质的；耦合严重：异步操作与redux的action偶合在⼀起，不⽅便管理；功能孱弱：有⼀些实际开发中常.../catch语法直接捕获处理；功能强⼤：redux-saga提供了⼤量的Saga辅助函数和Effect创建器供开发者使⽤，开发者⽆须封装或者简单封装即可使⽤；灵活：redux-saga可以将多个Saga

3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭