使用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）
相关·内容
3回答
React Native Redux调度不工作，但没有错误
javascript、reactjs、react-native、redux
我似乎不明白为什么我不能更新计数器，即使我发送了正确的操作类型，并且它们处于递增和递减状态。我尝试传递一个mapDispatchToProps并将函数放入该函数中，但仍然得到相同的问题，由于某些原因没有任何东西更新状态。
索引：
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import {reducer} from './src/reducers/counter';
const store = createStore(reducer);
co
浏览 1提问于2020-10-26得票数 1
3回答
Redux的第一步。如何为mapStateToProps增值？
javascript、reactjs、redux、react-redux
我是Redux的新手。我已经建立了简单的计数器应用程序，我想添加‘隐藏元素’的功能。所以，我必须通过props.show。我到底该怎么做呢？我需要创建新的reducer，或者我可以将这个值添加到mapStateToProps中吗？
App.js
import React from 'react';
import { connect } from 'react-redux'
const App = (props) => {
return(
<div>
<p>{props.count}&
浏览 1提问于2018-01-29得票数 2
回答已采纳
2回答
Redux未更新存储
reactjs、redux、react-redux
我正在学习redux，我在react更新存储数据时遇到了问题。 import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { configureStore } from "@reduxjs/toolkit";
import App from "./App";
const store = configureStore({
reducer: counter
浏览 17提问于2020-08-19得票数 1
回答已采纳
1回答
如何更新连接到redux store的组件？
reactjs、redux
我有两个组件，一个是应用程序组件，另一个是计数器component.Here应用程序组件是根组件，计数器组件是子组件。在订阅方法的索引组件中，我正在接收更新值。这里的问题是计数器组件如何接收更新，如果redux存储中有任何更改。
//index.js
import React from 'react';
import { render } from 'react-dom';
import Counter from './Counter';
import {Provider} from 'react-redux';
import {
浏览 0提问于2018-03-12得票数 0
2回答
反例动作两次
react-redux
我试图探索redux、Provider以及mapStateToProps和MapDispatchToProps的基础知识，使用非常简单的反例。练习的目的是将道具和动作注入计数器组件中。
我看到的问题是，我的行动是两次在每个按钮点击。我是一个Redux，所以我确信(我希望)这是一个相当基本的错误。我希望你能给我指点我哪里出错了。提前谢谢。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
impo
浏览 2提问于2017-12-22得票数 5
回答已采纳
1回答
React-Redux TypeError:无法读取未定义的属性'map‘
reactjs、redux
当我按下递增或递减按钮时，我得到这个message。我认为所有的步骤都是正确的，但我不明白为什么当我按下按钮(+或-)时，存储/状态设置为undefined； src/App.js import React, { Component } from "react";
import Counter from "./components/counter";
import { connect } from "react-redux";
class App extends Component {
render()
浏览 13提问于2019-06-14得票数 0
回答已采纳
3回答
如何在App.js中使用redux组件？
react-native、redux、react-redux
我在做一个简单的计数器应用程序。它有一个标签和一个按钮，您可以增加+1(每次按下)。
使用redux，我希望使用(在Redux中)存储在App.js文件中的计数。但是，我得到了一个错误：
错误:无法找到react redux上下文值；请确保组件包装在提供程序中。
使用useSelector可以在其他文件中工作，而不是App.js。这附近有工作吗？
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Dogs from './co
浏览 3提问于2021-04-30得票数 0
回答已采纳
1回答
无法使用redux使计数器工作
reactjs、redux
我正在学习redux，我不能让计数器工作。我设置了action.js、reducer.js和store.js，并在index.js中创建了一个商店和一个提供者。我还在App.js中对useSelector和useDispatch使用了react-redux，我不知道这里遗漏了什么。 在App.js中单击时，计数器似乎没有增加。这里我漏掉了什么？ 非常感谢，在此之前： //Reducer.js
const counterReducer = (state = 0,action) => {
switch(action.type){
case "INCREME
浏览 15提问于2020-06-29得票数 0
回答已采纳
2回答
如何在react-redux中返回组合的reducers？
javascript、reactjs、ecmascript-6、redux、reducers
我正在尝试使用react-redux来管理测试项目中的状态和道具。
例如，请考虑以下代码：(Index.js)
import React, { Component } from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore, combineReducers } from 'redux'
import Counter from './counter'
f
浏览 0提问于2018-04-09得票数 2
2回答
Redux更新对象状态
javascript、reactjs、redux
counterReducer；每当按下按钮时，我都会尝试增加计数器的状态(对象)。但是不确定如何通过1(递增)和-1(递减)来更新对象状态。 ? 每次我单击+按钮并使用state+ 1更新对象状态时，我都会收到上面的^ const initialState = {
counter: 0
}
const counter = (state=initialState,action) => {
switch(action.type){
case 'INCREMENT':
return {...state,counter
浏览 28提问于2021-08-20得票数 0
回答已采纳
1回答
redux在按钮单击时不起作用的问题
reactjs、redux
我是Redux的新手，正在学习如何在React中使用它。基本上，在使用react应用程序设置Redux时，我做的一切都是正确的，但当我点击按钮增量时，我希望显示的计数器会递增1。但当我这样做时，什么都不会发生，当然，我已经检查了发送的调度和操作，但基本上一切正常。因此，我真的需要你们的帮助，这里是我使用的代码： index.js import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App
浏览 22提问于2019-10-04得票数 0
1回答
为什么基本的redux应用程序会抛出"a找不到存储错误“？
react-native、redux、react-redux
我正在尝试开始使用react本地程序，我在一个基本应用程序上得到了以下错误
Could not find "store" in either the context or props of "Connect(App)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(App)".
这是我的密码
import React, { Component, PropTypes } f
浏览 3提问于2016-11-21得票数 1
回答已采纳
2回答
Redux工具包。未初始化错误: uSES未初始化
javascript、reactjs、react-redux、mern、redux-toolkit
我正在学习react redux工具包，这里是我面临的一些问题，我只想通过单击按钮来增量、和减少数字。
文件no.1(counterReducer.js)
import {createSlice } from '@reduxjs/toolkit'
export const counter = createSlice({
name:'counter',
initialState:{
value:0
},
reducers:{
increment:(state)=>{
st
浏览 7提问于2022-06-23得票数 0
回答已采纳
1回答
×TypeError: Object(...)不是函数
javascript、reactjs、redux、react-redux
我试图使用React和Redux构建一个简单的计数器，但我遇到了这个错误。错误出现在第23行，即const store=createStore(reducer)。我使用的React版本是16.8.6。
import React, { Component } from 'react';
import {render} from 'react-dom';
import {createStore} from 'react';
import {connect,Provider} from 'react-redux';
import
浏览 5提问于2019-11-26得票数 1
回答已采纳
1回答
如何使useSelector()工作(基本设置)？
reactjs、react-redux
我被困在最基本的设置中。我的useSelector根本不返回任何值。下面是代码: store.js：
import {createStore} from 'redux'
const initialState = {
counter: 0
}
const counterReducer = ( state = {initialState}, action) => {
switch (action.type) {
case 'INCREMENT': return {counter: state.counter+1}
浏览 7提问于2022-03-22得票数 0
回答已采纳
1回答
在调度后获取更新的redux状态
reactjs、redux、react-redux、state、dispatch
这是我的reducer.js
const initialState = {
counter: 0
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'increase':
state = { ...state, counter: state.counter + 1 }
break
default:
break
}
retur
浏览 3提问于2021-10-25得票数 1
2回答
使用Redux方法导入React组件
javascript、reactjs、ecmascript-6、redux、react-redux
我把一个简单的组件放在一起，试图让我的头脑了解一些React和Redux概念。
我现在正试图将Redux逻辑分离成一个独立的组件，这样总共有两个组件。
当我试图编译时，NewComponent中的所有方法/对象都是未定义的。当我使用this添加上下文时，我会得到相同的错误。
在尝试将Redux方法/对象放入单独的组件之前，下面是我的原始组件(它工作得很好)。
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
im
浏览 1提问于2018-04-10得票数 0
回答已采纳
1回答
React Redux (在单个文件中)在存储更改后不调用render()
javascript、reactjs、asynchronous、redux
我正在尝试创建一个React Redux文件的简单示例，以演示从API检索数据后的更改。reducer确实创建了一个要返回的新状态，但是render()并没有被调用。render()是否仅在Provider标记内的子组件中调用；即。它不会调用在其中定义提供程序的组件的render()。 如果有任何帮助，我将不胜感激，因为我已经阅读了几个小时的文档。:-( import React from 'react';
import axios from 'axios';
import { createStore } from 'redux';
impor
浏览 27提问于2020-01-03得票数 1
回答已采纳
1回答
Redux的React JS似乎未重新呈现
javascript、reactjs、react-redux
我刚刚开始学习Redux的React JS和have，我认为这是一个很容易回答的问题。我有以下代码：
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from "redux";
//
//----------------------------------------------------------------------------------------
//
const initialState = {
cou
浏览 0提问于2018-02-14得票数 0
2回答
不变冲突:在"Connect(App)“的上下文或属性中都找不到"store”。或者将根组件包装在中，或者显式地将"store“作为道具传递给"Connect(App)”。
我讨厌问一个已经被问了很多次的问题的变体，但我已经尝试了所有提出的解决方案，但都没有成功。
index.js
import React, {Component} from 'react'
import {AppRegistry} from 'react-native'
import {Provider} from 'react-redux'
i
浏览 0提问于2018-09-04得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
