开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用Redux在React Hooks应用程序中添加Storybook旋钮

Redux是一个用于JavaScript应用程序的可预测状态容器。它可以帮助管理应用程序的状态，并使状态的变化变得可追踪和可调试。Redux的核心概念包括store、action和reducer。

Store：Redux中的store是一个包含应用程序状态的对象。它是唯一的，负责存储整个应用程序的状态树。可以通过getState()方法获取当前状态，通过dispatch(action)方法触发状态的变化，通过subscribe(listener)方法注册监听器以响应状态的变化。
Action：Action是一个描述状态变化的普通对象。它必须包含一个type属性，用于指示要执行的操作类型。可以通过创建action creator函数来生成action对象，以便在应用程序中重复使用。
Reducer：Reducer是一个纯函数，用于根据action的类型来处理状态的变化。它接收当前状态和action作为参数，并返回一个新的状态。Redux中的reducer应该是纯函数，即给定相同的输入，始终返回相同的输出，不产生副作用。

在React Hooks应用程序中添加Redux和Storybook旋钮的步骤如下：

安装Redux和相关依赖：
安装Redux和相关依赖：
创建Redux store：
创建Redux store：
在应用程序中使用Redux提供的Provider组件，将store传递给应用程序的顶层组件：
在应用程序中使用Redux提供的Provider组件，将store传递给应用程序的顶层组件：
在组件中使用Redux的状态和操作：
在组件中使用Redux的状态和操作：
添加Storybook旋钮：在Storybook中使用Redux需要安装@storybook/addon-redux插件，并在.storybook/main.js配置文件中进行相应的配置。具体步骤如下：
- 安装插件：
- 安装插件：
- 在.storybook/main.js中添加插件配置：
- 在.storybook/main.js中添加插件配置：
- 在Storybook的故事文件中使用Redux提供的withRedux装饰器包裹组件：
- 在Storybook的故事文件中使用Redux提供的withRedux装饰器包裹组件：

以上是使用Redux在React Hooks应用程序中添加Storybook旋钮的基本步骤。通过Redux，我们可以更好地管理应用程序的状态，并通过Storybook旋钮进行可视化调试和测试。

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

腾讯云产品：云开发（https://cloud.tencent.com/product/tcb）
腾讯云产品：云函数（https://cloud.tencent.com/product/scf）
腾讯云产品：云数据库 MongoDB 版（https://cloud.tencent.com/product/cynosdb-for-mongodb）
腾讯云产品：云服务器（https://cloud.tencent.com/product/cvm）
腾讯云产品：云原生应用引擎（https://cloud.tencent.com/product/tke）
腾讯云产品：云存储（https://cloud.tencent.com/product/cos）
腾讯云产品：区块链服务（https://cloud.tencent.com/product/tbaas）
腾讯云产品：物联网开发平台（https://cloud.tencent.com/product/iotexplorer）
腾讯云产品：人工智能（https://cloud.tencent.com/product/ai）
腾讯云产品：音视频处理（https://cloud.tencent.com/product/mps）
腾讯云产品：网络安全（https://cloud.tencent.com/product/saf）
腾讯云产品：云监控（https://cloud.tencent.com/product/monitoring）
腾讯云产品：云解析（https://cloud.tencent.com/product/dns）
腾讯云产品：云联网（https://cloud.tencent.com/product/ccn）
腾讯云产品：云安全中心（https://cloud.tencent.com/product/ssc）
腾讯云产品：云审计（https://cloud.tencent.com/product/cloudaudit）
腾讯云产品：云市场（https://cloud.tencent.com/product/cm）

相关搜索:React Native，无法使用react -redux在购物车中添加项目 react-redux应用程序:在jsx中返回redux属性使用Lodash在Redux/React中的状态中添加和删除数据使用React Hooks向数组中的对象添加属性使用React Hooks添加到对象数组中的元素使用react-redux挂钩无法在React应用程序中调用Redux reducer 在apollo-react-redux应用程序中使用redux-form值得吗？在React / Redux中添加/更新深度对象数组在react Hooks中对样式化组件使用CSS attr()在react redux应用程序中定义专用路由？

相关搜索:

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

有帮助

没帮助

相关·内容

一天一夜，山月写完了这份高效组织 npm script 最佳实践

使用 create-react-app 生成的项目，它的 npm script 中只有 npm start { "start": "react-scripts start", "build":...在 CI 或前端托管平台 Vercel/Netlify 中，对于部署前端项目，最重要的一步就是打包。...Prettier 仅仅作代码的格式化，如空格、是否添加分号之类。...这时候 Git Hooks 就派上了用场。 Git Hooks 中的 precommit hook 会在代码提交之前执行脚本，如果脚本不通过 (Exit Code 不是 0)，则禁止提交。...run test ✓ react 15.0.0 → 16.0.0 npm install --no-save react-redux@7.0.0 npm run test ✗ react-redux

2K2 0

深入理解 Redux 原理及其在 React 中的使用流程

Store（存储）：Store 是一个保存应用程序状态的 JavaScript 对象。在一个 Redux 应用中，通常只有一个顶级的 Store。2....二、Redux 在 React 中的使用流程1. 安装依赖首先，我们需要在 React 项目中安装 redux 和 react-redux 两个依赖包。...使用 Provider 组件包装 App在项目的 index.js 文件中，使用 react-redux 提供的 Provider 组件包裹整个 App 组件，并将 Store 传递给 Provider...我们将使用 Redux 管理待办事项列表，用户可以添加、删除和修改待办事项。...Redux 为我们的应用提供了一个集中式的状态存储，使得状态管理变得更加清晰和可控。希望本文能帮助您更好地理解 Redux 的原理及其在 React 中的使用流程。

1183 1

Sentry 开发者贡献指南 - 前端(ReactJS生态)

Typing DefaultProps 类(Class)组件函数式(Function)组件参考使用 Hooks 使用库中的 hooks 使用 react 的内置 hooks 使用 context...我们在 setup.js 中定义了有用的 fixtures，使用这些！如果您以重复的方式定义模拟数据，则可能值得添加此文件。...要在本地运行 Storybook，请在 getsentry/sentry 存储库的根目录中运行 npm run storybook。它部署在某个地方吗？...https://swizec.com/blog/wormhole-state-management 使用自定义 hooks 可以创建自定义 hooks 来共享应用程序中的可重用逻辑。...不要为 hooks 重写虽然 hooks 可以在新代码中符合人体工程学，但我们应该避免重写现有代码以利用 hooks。重写需要时间，使我们面临风险，并且为最终用户提供的价值很小。

6.9K3 0

使用react-hooks在事件监听中state不更新问题

2021-04-21 16:56:43 在使用react开发网站时，使用事件监听是常有的事情，但是有时候你会发现一个问题，就是这个state有时候不更新，始终是一个值，让人很是费解。...经过多番查找，终于找到了原因--闭包原理其实我们所使用的函数组件在本质上就是执行一个函数后返回的组件，在之前的文章中有讲过关于闭包和作用域链的问题，在此不再赘述，这里重点说一下在组件中是如何形成闭包的...state变量，来执行具体的业务，如下： useEffect(()=>{ console.log(count) },[count]); 这个例子比较简单，通常情况下遇到多种变量，我们可以在监听事件中使用...，需要在初次生成组件时生成编辑器对象，而且只在初次时生成，内部需要在内容修改是调用父组件的onChange事件，为了简化使用上面的例子也能看出效果。...从上面的例子中我们可以发现执行后count也是不会发生变化的，其根本原因也是在于useEffect的闭包，解决方案和签名相同，在这里说一下只是想提醒大家在遇到此类问题时一脸懵逼。

6.9K3 0

几个好用的React-Native 开发工具

3、React Native Code Push React Native Code Push 是一个用于 React Native 应用热更新的服务，它可以帮助开发者在不发布新版本的情况下，快速地将应用程序的更新推送到用户设备上...这样一来，开发者可以更加方便地修复应用程序中的漏洞、添加新功能或者调整 UI 设计，而无需等待应用商店的审核。...4、Redux Redux 是一个状态管理工具，可以方便地将应用中的状态（比如用户信息、应用配置等）集中管理。...使用 React Native Debugger 可以提高开发效率和代码质量，推荐开发者在开发过程中使用。...使用 Storybook 可以提高开发效率和代码质量，推荐开发者在开发过程中使用。

2.1K1 0

推荐10个不错的React开源项目

TakeNote 使用 TypeScript、React、Redux、Node、Express、Codemirror、Webpack、Jest、Cypress、Feather Icons、ESLint...项目代码包含了后端、前端、Android 和 iOS 应用程序，同时支持在Windows / Linux / macOS 系统上运行。...React技术栈的开源项目，使用到的技术有React（自定义 Hooks、context）、Firebase 和 React 测试库。...除此之外，还使用 SCSS (CSS) 并遵循 BEM 命名方法来设置应用程序的样式，是一款不错的学习React知识的技术库。...该应用使用最新的 React 特性，例如带有Hooks的函数组件。此外，该项目还使用了几个自定义的轻量级 UI 组件，包括模态框和日期选择器等。

11.1K3 0

2020 年你应该知道的 React 库

: React Hooks or Redux/MobX/Mobx State Tree 使用 React 路由路由在 React 中起着重要作用。...React 中动态地添加样式，但是一个外部的 CSS 文件可以拥有 React 应用程序的所有剩余样式。...第二种方法是使用 linter，比如 ESLint。虽然样式指南只给出建议，但是 linter 在应用程序中强制执行这个建议。...就我个人而言，我不使用它，但是任何时候有人问到 JS 中的不变性(immutability)，大家都会指出 Immer，并且这可以加上 redux 或 React hooks。...您可以从小型开始，只添加库来解决特定的问题。当应用程序增长时，您可以沿途扩展构建块。否则你可以通过使用普通的 React 来保持轻量级。

14.4K4 0

「首席架构师推荐」React生态系统大集合

React设置流程 React钩子 React钩子用React Hooks和Context替换Redux React Hooks备忘单：解锁常见问题的解决方案如何使用React Hooks获取数据？...的完全替代品 react-play - 使用JDK8的Nashorn渲染Play框架中的React组件 rx-react - 在RxJS中与React一起使用的实用程序 react-with-di -...在CoffeeScript中实现Flux React：Flux Architecture 了解Flux 在Flux中哟 React.js架构 - Flux VS Reflux 避免单页应用程序中的事件链...- 一个简单的redux中间件，用于使用JSON Schema验证redux状态值和对象类型 redux-persist - 坚持并补充redux商店 Redux教程在ES6中使用React和Redux...- React组件包装器，用于将React与MobX结合使用 MobX教程 10分钟介绍MobX和React 使用MobX管理React应用程序中的复杂状态将您的应用程序从Redux重构为MobX

12.3K3 0

2019年，React 开发者应该掌握的 22 种神奇工具

以下是在示例中我们使用组件之一的例子： ? React-Proto 在 GitHub 上获得了 2,000 个星标。 3....Storybook 如果你还不了解 Storybook（https://storybook.js.org/），并且希望能够轻松地构建 UI 组件，我强烈建议你立即使用它。...例如，利用 Storybook README 包，我们可以在同一页面上创建 README 文档，同时开发供生产使用的 React 组件。这足以作为常规文档页面： ? 11....React Sight 你是否想过自己的应用程序在流程图中看起来是什么样的？...它还支持 React Router，Redux 和 React Fibre。使用此工具，您可以将鼠标悬停在节点上，这些节点是指向树中与它们直接相关的组件的链接。

2.4K2 0

【React】653- 22 个让 React 开发更高效更有趣的工具

/src/components，如下所示：以下是在示例中我们使用组件之一的例子： React-Proto 在 GitHub 上获得了 2,000 个星标。...不过，我认为这个应用程序还需要更新，并且还有很多需要做的工作，尤其是 React Hooks 的发布。除非我们有一张可见的背景图片，不然就不能缩小。...Storybook 如果大家还不了解 Storybook，并且希望能够轻松地构建 UI 组件，我强烈建议你立即使用它。...例如，利用 Storybook README 包，我们可以在同一页面上创建 README 文档，同时开发供生产使用的 React 组件。这足以作为常规文档页面了： 11....它还支持 React Router，Redux 和 React Fibre。使用此工具，我们可以将鼠标悬停在节点上，这些节点是指向树中与它们直接相关的组件的链接。

2K2 0

22 个让 React 开发更高效更有趣的工具

/src/components，如下所示：以下是在示例中我们使用组件之一的例子： React-Proto 在 GitHub 上获得了 2,000 个星标。...不过，我认为这个应用程序还需要更新，并且还有很多需要做的工作，尤其是 React Hooks 的发布。除非我们有一张可见的背景图片，不然就不能缩小。...Storybook 如果大家还不了解 Storybook，并且希望能够轻松地构建 UI 组件，我强烈建议你立即使用它。...例如，利用 Storybook README 包，我们可以在同一页面上创建 README 文档，同时开发供生产使用的 React 组件。这足以作为常规文档页面了： 11. ...它还支持 React Router，Redux 和 React Fibre。使用此工具，我们可以将鼠标悬停在节点上，这些节点是指向树中与它们直接相关的组件的链接。

10.2K3 1

22 个让 React 开发更高效更有趣的工具

/src/components，如下所示：以下是在示例中我们使用组件之一的例子： React-Proto 在 GitHub 上获得了 2,000 个星标。...不过，我认为这个应用程序还需要更新，并且还有很多需要做的工作，尤其是 React Hooks 的发布。除非我们有一张可见的背景图片，不然就不能缩小。...Storybook 如果大家还不了解 Storybook，并且希望能够轻松地构建 UI 组件，我强烈建议你立即使用它。...例如，利用 Storybook README 包，我们可以在同一页面上创建 README 文档，同时开发供生产使用的 React 组件。这足以作为常规文档页面了： 11. ...它还支持 React Router，Redux 和 React Fibre。使用此工具，我们可以将鼠标悬停在节点上，这些节点是指向树中与它们直接相关的组件的链接。

2.1K3 1

移动开发者必备的 React Native 开发工具

3、React Native Code PushReact Native Code Push 是一个用于 React Native 应用热更新的服务，它可以帮助开发者在不发布新版本的情况下，快速地将应用程序的更新推送到用户设备上...这样一来，开发者可以更加方便地修复应用程序中的漏洞、添加新功能或者调整 UI 设计，而无需等待应用商店的审核。...使用 React Native Debugger 可以提高开发效率和代码质量，推荐开发者在开发过程中使用。...Storybook 支持多种开发框架和平台，包括 React、React Native、Vue、Angular 等。使用 Storybook 可以提高开发效率和代码质量，推荐开发者在开发过程中使用。...React Native CLI 是一个非常重要的工具，推荐开发者在开发过程中使用。

1.7K2 0

React Native 开发工具推荐

这样一来，开发者可以更加方便地修复应用程序中的漏洞、添加新功能或者调整 UI 设计，而无需等待应用商店的审核。...使用 React Native Debugger 可以提高开发效率和代码质量，推荐开发者在开发过程中使用。...还可以在开发和运维过程中降低成本，避免重复的代码编写和维护。不过，使用小程序容器技术需要开发者具备一定的小程序开发经验和技能，需要熟悉小程序生命周期、API 调用方式、组件等知识。...Storybook 支持多种开发框架和平台，包括 React、React Native、Vue、Angular 等。使用 Storybook 可以提高开发效率和代码质量，推荐开发者在开发过程中使用。...React Native CLI 是一个非常重要的工具，推荐开发者在开发过程中使用。

1.7K2 0

2022 年的 React 生态

这三个 Hooks 足以让你实现一个强大的状态管理系统了。如果你发现自己过于频繁地使用 React 的 Context 来处理共享/全局状态，你一定要看看 Redux，它是现在最流行的状态管理库。...它允许你管理应用程序的全局状态，任何连接到其全局存储的 React 组件都可以读取和修改这些状态。如果你碰巧在用 Redux，你一定也应该查看 Redux Toolkit。...如果你已经在使用 Redux，并且想要在 Redux 中添加集成状态管理的数据请求功能，建议你看看 RTK Query，它将数据请求的功能更巧妙的集成到 Redux 中。...在 React 中， CSS Module 通常是将 CSS 文件放在 React 组件文件中： import styles from '....建议： ESLint：https://eslint.org/ Prettier：https://github.com/prettier/prettier ---- 身份认证在 React 应用程序中

5.7K2 0

写在 2021: 值得关注学习的前端框架和工具库

你可能同样在犹豫要不要学这玩意，我的意见是：学！因为确实NodeJS中目前没有特别全面的框架（虽然NestJS在Spring面前也是弟弟）。...在TS中这个工具的主要能力就是生成TS的类型定义，同时它的插件体系还提供了更多的额外能力，如Apollo-Client的插件，让你可以直接使用封装好的的useXXXQuery等，前端连查询语句都不用写了...简单来说，它和BlitzJS一样都是在JAMStack这一理念上的革新者。 Midway-Hooks[83]，繁易[84] 学长的作品，同样是淘系乃至阿里集团内广泛使用的框架。...Redux-Observable[91]， Redux的RxJS中间件。 Reactive.How[92]，生动的展示RxJS Observable在操作符管道中的流动，入门期间使用有奇效。...Husky[99]，快速配置Git Hooks，多人团队协作中确保规范的重要手段，通常会这样使用：pre-commit执行linter和prettier，commit-msg检查commit信息，pre-push

4.2K1 0

在线教育直播源码中React库的特性解读

React状态管理 React带有内置的hooks来管理局部状态:useState、useReducer和useContext。所有这些都可以在React中用于复杂的本地状态管理。...它甚至可以模拟Redux(Redux是React的一个流行的状态管理库)。　　所有React的内置hooks都非常适合本地状态管理。...如果远程数据不是来自GraphQL端点，请尝试使用React的Hooks来管理它。如果不行，像Redux或者MobX/MobxStatetree这样的解决方案可能会有所帮助。　　...1.1.png 　　虽然内联样式可以用JavaScript在React中动态地添加样式，但是一个外部的CSS文件可以拥有React应用程序的所有剩余样式。...尽管应用程序的某些部分仍然可以共享样式，但其他部分不必访问它。在React中，CSSModules通常将CSS文件与React组件文件共存。

1.4K4 0

2021年React学习路线图

React Hook 是 React 16.8 引入的新特性。它用在函数组件中，允许开发者不使用类的情况下，使用状态和其他特性。之前，函数组件是无状态的，状态和生命周期用在类组件中。...有了 Hooks，开发者可以在函数组件中使用状态。你应该知道如何使用最常见的 Hooks，比如 setState 和 useEffect。...它比 Redux 容易多，也可以使用 Hooks（现在你应该熟悉它了）。它使获取数据变得简单，可以在实际应用中做一些尝试。...从技术上讲，构建 React 应用程序不需要了解任何高级概念。然而，生产级应用程序通常使用到高级概念，例如 ref 和高阶组件。充分理解 React 功能总是很有用的，即使你不使用它。...您也可以尝试自己搭建 React 应用程序，而不使用 create-react-app 库。查看 Gulp、webpack 或 Babel，看看如何使用这些库来编译 React 代码。

7.5K2 1

谈谈 React 5种最流行的状态管理库

使用 Recoil selectors，你可以根据 state 计算派生属性，例如，可能是已过滤的待办事项数组（在todo app 中）或已发货的订单数组（在电子商务应用程序中）： import { selector...，我们使用 xstate-react 中的 useService hooks。...Redux React Redux docs[13] 代码行数:33 Redux 是整个 React 生态系统中最早，最成功的状态管理库之一。我已经在许多项目中使用过Redux，如今它依然很强大。...Reducers A provider 为了帮助解释所有这些工作原理，我在实现 Redux 中的 Notes app 的代码中做了注释： import React, { useState } from...在使用异步操作（例如数据获取）时，通常需要添加其他中间件，这会增加它的成本和复杂性。对我来说，Redux 起初很难学习。一旦我熟悉了框架，就可以很容易地使用和理解它。

2.6K2 0

【译】如何结合React Hooks来使用Redux

这意味着我们可以使用 React 的最新最佳实践。 Hooks 让我们为相同的功能编写更少的代码。我们需要编写的代码越少，我们就可以越快地启动应用程序。...简单的 Redux 组件这是一个非常基本和传统的 Redux 连接组件。您会如何使用 Hooks 来重构它?...用Redux切换复选框如果您对 hooks 有一定的了解，那么您可能知道 hooks 需要在函数组件中使用。您不能在 React 类中使用 hooks。...TOGGLE，我们在 Redux 常量中定义了这个类型并将其导入到组件中。...源码(https://codesandbox.io/s/react-redux-hook-by-indrek-lasn-utc6h)现在您已经了解了 hooks 的基础知识并使用了 hooks 与redux

2.6K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭