如何将按钮状态和调度操作更改为redux？
将按钮状态和调度操作更改为Redux可以通过以下步骤实现：
- 创建一个Redux store：使用Redux提供的createStore函数来创建一个store，这个store将存储应用的状态。
- 定义初始状态：在创建store时，需要指定应用的初始状态。这个状态对象应该包含按钮状态和调度操作相关的属性。
- 创建action：action是一个包含描述操作的type字段的普通对象。创建一个action来表示按钮状态和调度操作的变化。
- 创建reducer：reducer是一个纯函数，接收当前状态和action作为参数，返回新的状态。创建一个reducer来处理按钮状态和调度操作相关的action。
- 将reducer注册到store：使用store的dispatch方法将reducer注册到store中。这样当有action被dispatch时，reducer会被调用来更新状态。
- 在组件中使用redux：将之前处理按钮状态和调度操作的逻辑移到Redux中。在组件中通过store.getState()方法获取状态，通过store.dispatch()方法派发action来改变状态。
- 连接组件和store：使用react-redux提供的connect函数来连接组件和store。connect函数接收两个参数：mapStateToProps和mapDispatchToProps。mapStateToProps函数将store中的状态映射到组件的props中，mapDispatchToProps函数将dispatch方法映射到组件的props中。
- 在组件中使用Redux状态和操作：在组件中通过props来获取Redux中的状态和操作。通过props来更新按钮状态，并通过props调度操作。
通过上述步骤，可以将按钮状态和调度操作更改为Redux。注意，以上是一个简化的流程，实际应用中可能需要更多的Redux概念和技术来处理复杂的状态管理需求。
相关·内容
1回答
基本上有一个redux / app应用程序，我在chrome工具中检查了它，我发现它在redux商店中有一个标志，类似于
"premiumFeature": false;
所以我想改变它，看看会发生什么，我该怎么做呢？我如何手动更改它？如何将其公开为全局变量？
浏览 0提问于2016-11-12得票数 3
我有一个Modal，它有以下代码：
class CreateBookingModal extends React.Component {
render() {
return (
<Modal show={this.props.showModal}>
<Modal.Header>
<Modal.Title>{`${strings.createBookingModal.title} ${convertDateToString((this.pro
浏览 3提问于2016-11-01得票数 0
1回答
找不到任何描述它的例子。
我正在尝试创建下载按钮使用反应应用程序，但通过redux，即。实际上，我连接到url并获得响应文件(代码200)。
export function sendTimeline(token, timelineObj) {
const request = axios.post(`muURLGoesHere`, timelineObj, {
headers: {
"Content-Type": "application/vnd.ms-excel",
"X-Accept-Version": &#
浏览 0提问于2018-05-09得票数 1
我正在使用React和Redux，并构建了一个简单的todo-app。现在，我想为用户创建一个保存按钮，它将保存对待办事项所做的任何更改(例如，更改文本)。因此，保存按钮需要以某种方式知道是否对待办事项进行了任何更改。 例如，最初我们有这些来自Redux的待办事项： const todos = [
{
id: 0,
text: 'Learn Redux',
},
{
id: 1,
text: 'Learn React',
}
] 但是用户对待办事项做了一些更改！ c
浏览 94提问于2017-08-28得票数 0
回答已采纳
2回答
我试图将按下按钮的结果传递到Redux状态。用户可以在“否”和“是”之间作出选择
我想将它添加到状态，然后导航到下一个屏幕。下面是我宣布国家的方式。
const [state, setState ] = useState ({
isDisabled: true,
showAnswer: false,
uuid: '',
})
const [value, onChange] = useState('')
const [codeValue, onCodeChange] = useState('
浏览 3提问于2021-02-04得票数 0
回答已采纳
1回答
我正在做待办事项列表，并想做功能，当你点击按钮“完成”时，文本将被划掉。我做了有'text‘和'isDone’字段的交易的数组。默认情况下，isDone为false，当单击时，我将获得所有包含交易和文本交易的数组，您可以在其中单击。然后我将数组映射到我获得的交易，并比较单击交易中的文本和array.If中所有交易中的文本，它们是相同的，我将isDone从false更改为true。但它会更新，如果我刷新页面，我需要它在点击更新数据。我使用redux-persist并将所有状态放入localStorage
按钮
<button onClick={()=>this.pro
浏览 0提问于2020-04-09得票数 0
我在我的项目中使用redux，redux-thunk和react，这不是实际的代码，而是代码的简化版本，所以可能有一些语法错误，但问题是它应该如何工作。
我使用了react-redux connect的react包装器。
在我的操作中，我使用redux-thunk如下：
return function (dispatch, state) {
dispatch(oneAction);
dispatch(secondAction);
dispatch(thirdAction);
}
UI只在thirdAction之后呈现，这很好，但是我不知道是什么告诉系统现在呈
浏览 0提问于2017-07-12得票数 0
在阅读了redux官方文档后，我无法理解action creator函数和简单action之间的区别。它们是互补的吗？
浏览 2提问于2019-06-03得票数 1
我正在尝试使用redux全局传递状态。我想要做的是，在第一个屏幕中，我生成一个randomNumber并将其设置为global state。
然后，我导航到下一个屏幕，当我切换一个按钮时，我会回调global state randomNumber。下面是我的代码：
App.js
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import { createDrawerNavigator, createStackNavigator, } f
浏览 1提问于2018-10-15得票数 0
2回答
我正在尝试做一个反应应用，在那里我有一个表单，当我提交时，我想显示的数据在屏幕上。我也在使用redux。我对所有这些都是陌生的，所以我不知道如何将数据保存到存储区，然后显示它为。
如果有人能告诉我该怎么做。我想我应该保存表单中的数据，把它传递给商店，但是不知道怎么做。
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as acti
浏览 5提问于2020-03-01得票数 0
回答已采纳
1回答
Redux操作不触发缩减程序
、、、、
问题
我将react应用程序与Redux存储连接起来，添加了一个api操作来从我的后端收集数据，包括中间件redux-promise。当我可以在React网页编辑器中看到我的存储和组合减速键时，几乎所有的东西都可以工作。当我调用我的操作时，它会工作，并且控制台会记录已完成的承诺。然而，我的减速器从来没有运行过。我认为这是我在主容器上分派的一个问题，但我已经尝试了目前我能想到的所有方法--常规分派()和bindActionCreators。帮助!
Index.js
import React from 'react';
import ReactDOM from 'react
浏览 2提问于2018-04-05得票数 3
我有redux的react导航设置。我的应用程序由一个带有登录和内容屏幕的父TabBarNavigator组成。内容屏幕本身就是一个Stack Navigator，其中包含应用程序的主导航。redux和导航器的所有其他方面都按预期工作，但StackNavigator上的默认后退按钮也会触发其父TabBarNavigator返回。
这是预期的行为吗？我注意到，如果我在navigationOptions中像这样定义headerLeft，它会像预期的那样工作：
static navigationOptions = ({ navigation }) => {
return {
浏览 7提问于2017-05-26得票数 11
1回答
我正在尝试使用Axios和redux从API响应调用返回一些数据。然而，我被困在如何检索数据的问题上。日志工作得很好，但我似乎无法访问promise中的数据。任何帮助都将不胜感激。
Videoplayer.js
import React, { Component } from 'react';
import { connect } from "react-redux";
import * as actions from "../actions";
class Videoplayer extends Compone
浏览 84提问于2018-07-04得票数 0
回答已采纳
我已经开始学习Redux与React，我陷入了我的项目的一部分，这是一个电子商务商店，当用户点击添加到购物车时，我想要更新数量并将文章添加到袋子中。我已经为其他功能实现了Redux，但是我找到了ReduxToolkit问题的解决方案，但我还没有学到这个解决方案
如何将使用redux工具包编写的代码转换为Redux？
import { createSlice } from "@reduxjs/toolkit";
const cartSlice = createSlice({
name: "cart",
initialState: {
produc
浏览 2提问于2021-10-12得票数 0
我已经创建了一个表单，该表单正在使用serve的数据进行验证。如果成功，验证函数将从服务器返回一些数据。
我的问题是：如何使用来自服务器的数据？更具体地说，我如何将它们存储在redux商店！？中
浏览 2提问于2019-12-30得票数 0
回答已采纳
1回答
没有redux- thunk，你的动作创建者仍然可以将调度作为参数，似乎可以做任何thunk会做的事情：
那么redux-thunk的动机到底是什么呢？
浏览 0提问于2018-04-08得票数 0
Redux-thunk允许您创建返回函数而不是操作的操作创建器。内部函数接收存储方法dispatch和getState作为参数。
function incrementAsync() {
return (dispatch, getState) => {
setTimeout(() => {
dispatch(increment());
}, 1000);
};
}
但与此同时，react-redux的connect已经有了一个mapDispatchToProps参数，可用于将操作创建器包装到调度调用中，以便可以直接调用它们。使用mapDispat
浏览 0提问于2017-06-12得票数 4
1回答
我正在尝试理解处理fetch HTTP请求的正确方式，并确保收到所请求的数据。
我的观点是，我的请求可能会出错，所需的数据对我的应用程序至关重要。在这种情况下，更合适的处理方式是什么呢？只是创建一个新的请求吗？
我如何将该解决方案与redux和redux-thunk相结合
谢谢
浏览 1提问于2017-01-10得票数 1
我现在正在学习redux。下面共享的代码是独立于React的，因此React集成是不考虑的。
下面是redux-basics.js，它有还原器、商店、操作和订阅部分。
const redux = require('redux');
const createStore = redux.createStore;
// Note : Store Creation is actually dependent on Reducer Thats why reducer must be created first.
// Reducer
const initialState = { co
浏览 2提问于2019-11-22得票数 0
回答已采纳
我在自己的本机应用程序中实现了redux，在单击按钮时，我在mapDispatchToProps中发送了方法，并直接调用API in action方法，并使用API响应更新了还原器中的存储，并从mapStateToProps.中的redux存储中检索数据。效果很好。
我们可以从任何类中的redux存储中检索数据，但是我们可以直接从类中更新或删除redux中的存储值，而无需在mapDispatchToProps中调度操作。
是否可以直接在我们的类或函数中操作和更新存储数据？
浏览 3提问于2020-01-10得票数 1
回答已采纳
1回答
目前，我正在做一个项目，使用事件来更新侦听这些事件的其他组件，并尝试将这些事件转换为Redux操作。
例如，当用户登录组件时，监听此事件并调用API来更新其状态，事件是基于组件是否存在而触发的，因此对于Redux，我必须使用componentWillupdate检查道具是否在组件内部发生更改，然后从那里调用API。
我想知道这是做类似事情的最佳解决方案，还是有其他插件可以使用？
浏览 4提问于2019-04-08得票数 0
1回答
我想在组件卸载后取消一些函数，因为它会导致内存泄漏。我的代码如下所示 componentDidUpdate(prevProps) {
if (prevProps.org.org !== this.props.org.org && this.mounted) {
this.props.clearGraph();
this.props.graphGet(this.props.org.org);
this.setState({ org: this.props.org.org });
}
}
componentDidMoun
浏览 24提问于2019-09-03得票数 1
我正在使用React + Flux。我们的团队正计划从flux迁移到redux。来自flux世界的Redux让我非常困惑。在中，流量控制流程很简单，来自Components -> actions -> Store store updates back components。这很简单，也很清楚。
但在redux中它是令人困惑的。这里没有store，是的，有一些没有使用store的例子。我看了几个教程，似乎每个人都有自己的实现风格。有些人在使用容器，有些人没有。(我不知道这个容器的概念，也不能理解mapStateToProps、mapDispatchToProps是做什么的)。
有人
浏览 76提问于2016-07-16得票数 85
回答已采纳
我最近刚刚开始使用Redux，我设法使用以下代码将我的<App />组件连接到商店： const mapStateToProps = state => ({
...state,
});
const mapDispatchToProps = dispatch => ({
writeSomething: () => dispatch(writeSomething),
});
export default connect(mapStateToProps, mapDispatchToProps)(App); 这很简单，当我按下一个按钮时，writeS
浏览 22提问于2020-01-19得票数 0
我想在React + Redux中构建一个函数，当用户单击按钮时，调用API并将数据加载到存储中，然后在页面上显示数据。
我想使用redux-actions框架：，但我对我见过的不同示例感到有点困惑。
在一些示例中，我看到了以下内容：
export const GET_USER_DATA = 'GET_USER_DATA';
export const getUserData = createAction(
GET_USER_DATA,
async () => {
try {
return await getUserInfo(conf
浏览 0提问于2018-06-09得票数 2
我只是想了解一下react.js，也就是说，我刚刚在网上学完了一些教程。
我对redux完全陌生，它是我看过的一些视频教程的一部分。我越是深入研究它，它对我来说就越没有意义，因为redux取代了react.js最初的想法。在react中，组件有自己的状态，可以通过道具向下传递，以保持工作流自上而下。
使用redux，我们现在试图使整个应用程序状态成为全局的，并且我们必须定义操作(全局)状态的操作，那么除了“普通的”javascript发布/订阅或观察者模式之外，这些操作还有什么呢？或者也许我弄错了？-非常感谢你的澄清。
浏览 4提问于2016-10-11得票数 37
回答已采纳
1回答
HW赋值要求我们使用React、Redux和Redux从excel类型表中一个名为url的提供端点返回JSON数据。
我能够通过使用React和Axios返回表中的适当数据，正如您将在代码框中看到的那样。
在这个组合中实现Redux和Thunk的简单方法是什么？
我的想法是：
为Redux设置store.js以创建、存储和初始化状态
Create文件夹=> create dataActions.js =>编写一个带有Axios请求的useEffect方法的操作函数
Create文件夹=> create dataReducer.js =>写一个还原器，它初始
浏览 3提问于2019-07-09得票数 1
2回答
目前，我正在呈现一个歌曲列表，其中有一个按钮，我做了一个表单，以添加歌曲。我如何使它，所以当该表单提交时，它将隐藏的表单，而不按一下按钮。我试图创建一个useEffect来触发这个函数，但是我无法破解它。提前谢谢。
歌曲清单
import { useEffect, useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { deleteSong, getSongs, updateSong } from '../../store/son
浏览 5提问于2021-12-09得票数 0
回答已采纳
在我的redux应用程序中，我需要向服务器发送一个请求，但是为了构建请求的有效负载，我需要还原器首先完成状态更新(因为这是我需要发送的状态)。
但是，在Redux中显然不允许这样做(不能为响应(状态更新的)而分派操作)。我很想用"Redux方式“来做这件事，但是我想不出如何用不同的方式来设计它。请帮帮忙。
假设有一个应用程序(这是对我的应用程序的重大简化)，其中：
用户选择要应用的数学操作(例如+2、*3、-1等)
这些操作总是按顺序应用(例如(0+2)*3)-1))
然而，计算本身是在服务器上计算的(这是这个问题的核心问题)。
当服务器返回结果时，它将显示在客户机上。
浏览 1提问于2016-04-18得票数 0
我有一个简单的安卓登录系统和一个mongoDB & Express与它相结合。前端有一些输入字段，我用这些字段实现了redux来访问系统所有页面中的变量。我在通过我拥有的后端将用户信息从前端字段发布到数据库时遇到了问题。
我需要知道如何将这些数据从我的前端发布到我拥有的猫鼬数据库。下面是我的密码。
形式
从“ -本机”导入{ StyleSheet、视图、TextInput、文本、StatusBar、TouchableOpacity }；从“redux-form”导入{ Field、reduxForm }；从‘./ InputText’导入InputText；从‘redux’导入{ co
浏览 2提问于2020-04-13得票数 0
1回答
为什么调度操作重写我的存储值？
、、、、
我使用redux钩子从功能组件向redux商店发送了两次。
当我像这样单独发送这些文件时，其中只有一个存储在我的redux存储中，因为每次都会刷新，并且只保存一个。我如何将它们一起发送，或者如何防止redux存储刷新和丢失第一个分派有效负载？？。
dispatch({
type: "access_token",
payload: googleUser.accessToken,
});
dispatch({
type: "firebase_u
浏览 1提问于2021-11-12得票数 0
回答已采纳
我是一个新的react-native，我正在从服务器获取数据，并在数据的基础上更新我的UI元素，就像改变背景颜色或隐藏图像一样。为了实现这一点，我应该遵循什么方法，现在我正在尝试使用redux来实现，但不知何故无法更新redux中的特定项，因为在redux中我正在存储Json数据。我试着更新，但仍然没有运气来更新redux。
基本上，如果我从服务器自动获得任何数据，比如通知或其他数据，我想在每个屏幕上更新我的UI。
请帮助我决定更好的方法来实现这一点。
提前谢谢。
依赖关系：
"dependencies": {
"firebase": "^5.0
浏览 3提问于2019-05-14得票数 1
我刚接触到Redux，我正在制作一个简单的Redux应用程序。默认情况下，有一个狗的列表，如果我单击其中一个按钮，我可以看到有关所选狗的详细信息。现在，如果我单击按钮，它会说"this.props.selectDog不是一个函数“。在控制台中，selectedDog对象中没有狗，而是写着"selectedDog：()“。如何修复此错误？
Action Creator
export const selectDog = (dogs) => {
return {
type: 'SELECT_DOG',
payload:
浏览 0提问于2019-06-18得票数 0
回答已采纳
2回答
如何清除持久化状态onClick
、、、、
使用的语言:带有REACT REDUX工具包的JS (在本例中是redux-持久化)
下面是上下文:我有一个表单，当用户刷新页面时，我会使用redux持久化来保持状态。例如，我们有一个输入文本，用户编写一些东西。如果他刷新，文本将被保存。
这是我的问题:我有一个按钮。在单击时，我想清理状态，并将表单重置为他的初始状态。
我只知道如何清除所有redux持久化状态
<p onClick={() => persistor.purge()}> PURGE</p>
这是我的店
import { configureStore, combineReducers } from
浏览 12提问于2022-09-13得票数 0
我已经学习了几天的React/Redux。在普通英语和基础英语中，mapDispatchToProps是什么？
我有一个我不明白的功能。
function mapDispatchToProps(dispatch) {
return bindActionCreators({ selectBook: selectBook}, dispatch);
}
浏览 7提问于2017-11-02得票数 3
回答已采纳
2回答
我对Redux和Redux的反应很新，所以我可能用完全错误的方式来做这件事，事实上，从对类似问题的其他一些回答来看，我怀疑我做了很多错误的事情。
我的“布局”组件中有一个按钮，它将一个类添加到div中，这个类来自一个状态。该按钮是一个切换键，它将打开和关闭状态&类(这将导致菜单出现并使页面的其余部分变暗)。
不过，我也希望与'Nav‘组件(它位于'Header’组件中，而后者又位于‘Layout’中)进行任何交互，以切换状态&类(因此单击链接会折叠菜单)。在jQuery/VanillaJS中，这是非常容易的，但我似乎无法找到React/Redux的实现方式。
布
浏览 0提问于2016-06-14得票数 2
回答已采纳
2回答
我正在试图弄清楚如何处理React/Redux应用程序中的错误，并弄清楚Redux允许由于不可变的状态模式而向后遍历状态连续体。如果post失败，在Redux上遍历时间，同时递增组件的内部重试计数器，并最终调度必要的操作，这是疯狂的想法吗？如何使用react-redux转到以前的状态？
浏览 15提问于2016-07-28得票数 4
首先，我的代码正常工作，可以正常地从Redux中提取数据。所有输入框都接收用户输入，并在提交后完美地提交(如我的控制台中所示)。
我遇到的唯一问题是弄不清楚如何将该信息发送到useEffect()中的实际DOM。当用户提交新数据时，我希望它显示在当前列表的顶部(unshift())，而不是底部。
我已经盯着它看了很长时间了，我很确定我可能想多了。不过，任何帮助都将不胜感激。
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
impo
浏览 0提问于2021-03-17得票数 0
1回答
我通过localStorage中的一个值来设置我的redux状态。当我导航到我的页面时，它工作得很好。但是，当我执行硬刷新时，尽管localStorage中的值是向下传递的，但状态永远不会设置。
下面是我的代码：
class SomeComponent {
componentWillMount() {
if (typeof localStorage !== 'undefined') {
console.log('I get to here...', localStorage.getItem('someValue')) //
浏览 0提问于2018-03-12得票数 0
我应该开发一个可以通过react/redux从所有组件调用的确认对话框。我必须在内部传递redux state 2回调函数，其中的accept和reject来自确认对话框，但函数是不可序列化的。有什么想法吗？
浏览 9提问于2018-02-28得票数 0
回答已采纳
我在我的应用程序中使用了react和redux。现在要将混合面板添加到应用程序中。我认为Mixpanel不需要更新任何状态。那么，混合面板函数/事件需要还是应该是一个redux操作？或者你认为这是不必要的？
我的想法是，mixpanel不会更新任何状态，因此它不需要处于redux操作中。
你的意见是什么？
谢谢!
浏览 3提问于2016-12-05得票数 0
回答已采纳
我在查看redux的文档，文档中没有回调字段。但是在setState方法中有回调。调度方法不负责setState函数吗？如何在redux的调度方法中进行回调？
浏览 3提问于2018-11-21得票数 3
回答已采纳
handleDeleteClick = propertyName => () => {
this.props.clearFilterOption(propertyName, this.props.filtersPropertyName);
this.props.onFilterClear();
}; handleDeleteClick函数是一个按钮处理程序。我的第一个redux操作clearFilterOption修改了存储。第二个动作onFilterClear是从redux-thunk的getState映射过滤器参数并调用api的异步动作。我的问题是- redux th
浏览 7提问于2019-05-29得票数 1
回答已采纳
1回答
有人知道我是如何使用分派将我的材料Ui选择器选择(选定的数据)存储在redux中的吗？
我想从材料Ui选择器中选择数据，然后将其存储在redux中。但我不知道怎么才能不用扣子就把它储存起来。通常，我们应用分派类型和有效载荷在按钮上提交，但在选择器，我能做什么。
提前谢谢。
浏览 3提问于2021-12-09得票数 0
1回答
如何等待分派的动作完成？
、、、
在我的任务中，我在一个名为dispatches的数组中有两个调度，用于修改Redux存储。只有在它们都完成之后(即修改了Redux存储)，我才想发送finalDispatchCall。我试着将它们都放在一个Promise中，名为then，但在secondDispatchCall更新Redux商店之前，我仍然看到了正在制作的finalDispatchCall。
const dispatches = [];
dispatches.push(dispatch(firstDispatchCall());
dispatches.push(dispatch(secondDispatchCall());
P
浏览 4提问于2021-08-05得票数 1
2回答
我用React和Redux做了一个模态窗口。我想避免本地状态，所以我使用Redux来保存模式是否打开的信息。 Modal.js import React from 'react';
import './Modal.css';
import {useSelector, useDispatch} from 'react-redux';
import { isModalOpen } from '../actions/index';
const Modal = (props) => {
const dispatch =
浏览 20提问于2021-09-20得票数 0
我正在使用material-ui，React，Redux，当我请求成功和失败时，我想显示snackbar，我不知道我在哪里创建了显示和隐藏snackbar的标志，任何帮助都会非常有价值！！
浏览 5提问于2017-04-18得票数 1
我是React和Redux的新手。我有一个带有几个字段的redux表单。在我的Redux DevTools中，我可以看到我的表单和它的所有“值”，并观察输入的变化。在用户输入所有需要的数据后，单击“submit”按钮通过一个操作使用新数据更新Redux状态。所有这些都在起作用。
当用户输入数据时，在提交更改之前，我有一个要求，当用户对某个字段进行更改时，我需要更改另一个字段的显示值。更具体地说，在更新表单的状态之前，当用户输入字段“A”的更改时，我需要检索表单的显示值字段“B”，进行计算，然后将结果显示在字段“C”中。
有没有办法访问Redux表单的显示值？如何以编程方式更新显示的Redux表
浏览 14提问于2020-02-07得票数 0
1回答
我认为这更多的是一个概念/架构问题，但我将包括代码样本来帮助解释这个问题。我有一个标准化的redux状态，其中实体状态切片如下所示：
entities: {
projects: {
[id]: {...},
[id]: {...},
...
},
assignments: {
[id]: {...},
[id]: {...},
...
}
}
一个单独的任务看起来像这样：
{
id: 1,
name: 'assignme
浏览 0提问于2019-08-16得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
