redux-状态更改，但组件不显示重新呈现的视图
Redux是一个用于JavaScript应用程序的可预测状态容器。它可以帮助开发者管理应用程序的状态，并使状态的更改变得可追踪和可预测。Redux的核心概念包括store、action和reducer。
- Store：Redux中的store是一个包含应用程序状态的对象。它是唯一的，负责存储整个应用程序的状态树。开发者可以通过store来获取应用程序的状态，以及派发action来触发状态的更改。
- Action：Action是一个描述状态更改的普通JavaScript对象。它必须包含一个type属性，用于指示要执行的操作类型。开发者可以通过派发action来通知Redux进行状态更改。
- Reducer：Reducer是一个纯函数，用于根据action的类型来处理状态的更改。它接收当前的状态和action作为参数，并返回一个新的状态对象。Reducer应该是纯函数，即相同的输入始终产生相同的输出，不应该有副作用。
当应用程序的状态发生更改时，Redux会自动触发组件的重新渲染，以反映新的状态。但是，如果状态的更改不会导致组件的显示重新呈现，可以通过在组件中使用React的shouldComponentUpdate方法来优化性能。
对于Redux的应用场景，它特别适用于大型复杂应用程序，因为它可以帮助开发者更好地组织和管理应用程序的状态。此外，Redux还提供了一些中间件，用于处理异步操作、日志记录等。
腾讯云提供了云原生应用开发平台Tencent Serverless Framework（TSF），它可以帮助开发者快速构建和部署云原生应用程序。TSF支持多种编程语言和框架，包括Node.js、Java、Python等，可以与Redux结合使用来构建可预测的状态管理系统。
更多关于Redux的信息和使用方法，可以参考腾讯云的文档：Tencent Serverless Framework（TSF）。
相关·内容
2回答
将数据写入redux中的最简单的方法是什么？
javascript、reactjs、ecmascript-6、redux
在我的应用程序中，我使用了React和Redux (以及用于异步任务的Redux-thunk )。因此，当我需要将一些数据写入store作为component交互的结果时，我会同时使用action和reducer。但它总是必要的吗？尤其是在对修改后的字段没有connect的情况下，component？我总是需要action和reducer将一些数据写入store吗？或者，也许有一种类似于setState in store的方法
浏览 7提问于2016-11-15得票数 0
回答已采纳
1回答
React本机:另一个“未定义的对象不是对象”(计算action.type)
ios、react-native、react-redux、create-react-native-app
我正在开发一个CRNA应用程序，但是，存储连接不起作用，在创建存储区时，我会收到上面的错误。
未定义的不是一个对象(计算action.type)
为了寻找类似的问题，我来到了，它是一个在传递给createStore函数时被调用的还原器，这不是我的情况。
与异步调度程序之前调用的相关的AnalyticsTracker也不是我的情况。
这是复制的最低代码。
App.js
import React from 'react';
import {
View,
Text
} from 'react-native';
import { Provider } from
浏览 0提问于2018-08-06得票数 1
回答已采纳
2回答
在Redux中我应该把通用代码放在哪里呢？
reactjs、redux
我有一个使用Reactjs和Redux的应用程序。有一个action，它重置减速器的状态。我的问题是:哪里是最好的地方执行？我正在考虑两种选择：
每个减速器处理操作并重置其状态。
const reducer1 = (state = defaultState，action) => { switch (action.type) { case 'reset'：{ // .}/. }
根还原器重置全局状态
const appReducer = combineReducers({ reducer1，reducer2，reducer3 }) const rootReducer = (
浏览 2提问于2021-02-05得票数 0
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回答
如何通过redux更新状态后的React组件？
javascript、reactjs、redux
我正在学习React和Redux，当我这样做的时候，我决定制作一个带有按钮的网页，点击按钮就会改变状态。在按钮下面，我想在另一个组件中显示当前状态。虽然单击按钮会更改状态，但它不会反映在组件中。下面是我的代码：
App.js
import React from 'react'
import Name from './Name'
import {changeName} from './Action';
export default function App () {
return (
<div>
浏览 0提问于2019-10-05得票数 6
3回答
为什么Redux减速器必须没有副作用？
javascript、reactjs、redux
我一直在我的反应应用程序中使用Redux，有些东西一直困扰着我。Redux的文档非常清楚地表明，还原器应该是免费的。你经常会看到这样的例子：
function reducer(state = { exampleState: true }, action) {
switch(action.type) {
case "ACTION_EXAMPLE":
return Object.assign({}, state, { exampleState: false });
default:
return state;
}
}
我的问题是，为何要这样做呢？Ja
浏览 3提问于2016-03-15得票数 9
回答已采纳
1回答
用createStore取代configureStore
javascript、reactjs、redux、react-redux、next.js
我更新了我的包裹，VScode告诉我createStore被贬值了。所以我开始更换它
我的商店文件，我已经包括了原来的行作为评论在底部。
import { configureStore } from '@reduxjs/toolkit';
import { Action, createStore } from 'redux'
export type State = { context: AudioContext | null}
export const START_AUDIO = "startAudio";
const initialSta
浏览 10提问于2022-05-28得票数 2
回答已采纳
4回答
Redux应用程序中另一个组件中连接函数值的访问问题
javascript、reactjs、redux、react-redux
我已经在我的React应用程序中设置了Redux，但是当我使用this.props在一个单独的文件中访问另一个组件中的数据时，没有传递任何数据。我的操作正在执行，它传递我想要的数据。这是我的actions.js
export const ADD_CART = 'ADD_CART';
export function addCart(item){
return {
type: ADD_CART,
payload: item
}
};
我的reducer.js是：
import {ADD_CART} from './actio
浏览 6提问于2017-05-29得票数 2
回答已采纳
2回答
Redux。将状态值传递给reducer
javascript、reactjs、redux、react-redux
我正在尝试在我的应用程序中实现Redux。所以，我创建了action，reducer，store等。现在，我必须将state传递给reducer并更改此参数的值(布尔值)。我不知道我做错了什么。单击按钮后触发reducer中的alert，但dialog不关闭。你知道怎么改变open的值吗？
动作
export const checkPassword = () => ({
type: "CHECK_PASSWORD"
});
组件
const mapDispatchToProps = dispatch => {
return {
c
浏览 0提问于2018-01-30得票数 2
回答已采纳
2回答
Redux Thunk为什么我必须调用dispatch()两次？
reactjs、redux、redux-thunk
注意，我使用dispatch()调用setStepPositionIndex()。当我将dispatch(...)删除为setStepPositionIndex()时，我希望setStepPositionIndex()中的分派调用将接收它传递的普通操作对象并分派它……
Alternatively，如果我删除setStepPositionIndex()中的dispatch()调用(并保留dispatch(setStepPositionIndex())，同时显式返回其中的纯actionObj，我将期望使用dispatch(setStepPositionIndex(actionObj))成功分派
，
浏览 132提问于2018-09-04得票数 0
回答已采纳
3回答
具有内部隔离Redux存储的可修复组件
reactjs、redux、react-redux
我正在考虑在React中构建一个相当复杂的图表组件，我希望它能够跨许多不同的项目进行修复。不用说，这样的组件有许多需要管理的状态。
Redux似乎非常适合这一点，但是如果我只是将顶级容器包装在一个带有自定义商店的提供者中……如果组件包含在更大的React/Redux应用程序中，组件的内部redux存储不会干扰全局应用程序状态吗？
import React, { Component } from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-red
浏览 10提问于2016-05-04得票数 3
回答已采纳
1回答
如何重用使用React & Redux更改状态的组件
reactjs、redux、state、reusability、code-reuse
在我的React/Redux应用中，我遇到了一个可重用性难题。我已经编写了可重用的React组件，例如dropdowns和sliders，并将状态值存储在我的Redux Store中。现在我开始明白了，只要组件的任何JSX实例更改状态，该组件的所有其他实例也会更改状态。它们都开始相互模仿，而我需要它们独立运行。我还想在组件的不同实例中以不同的方式初始化状态，但无法找到这样做的方法。例如，对于滑块，我希望滑块范围的起始值和结束值在组件的不同实例中是不同的。通过React的普通道具系统很容易做到这一点，但我对如何通过Redux做到这一点感到困惑。 我对此进行了一些研究，似乎解决方案是在Redux
浏览 12提问于2020-12-03得票数 0
3回答
Redux和React本机组件连接: this.props未定义
react-native、redux、react-redux、undefined
我正在尝试访问在我的reducer的初始状态中定义的name字段。目前，this.props正在返回未定义的。 我的reducer： import { combineReducers } from 'redux';
const INITIAL_STATE = {
name: "Test"
}
const userReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
default:
return state
}
}
浏览 24提问于2019-12-21得票数 1
回答已采纳
3回答
为什么我的状态没有改变，为什么我对{store.getState()}的引用根本没有出现？
javascript、reactjs、react-native、redux
我是新来的反应和Redux，我有麻烦。下面的代码没有像我期望的那样将我的状态更新到7，并且这个区域没有呈现任何东西，甚至是默认的。
几天来我一直在努力研究这个问题。
任何帮助都是非常感谢的。
谢谢。
import React from 'react';
import { Text, Button, View } from 'react-native'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
// Define the
浏览 6提问于2019-12-30得票数 1
回答已采纳
1回答
为什么我无法在React-Native Redux中从我的mapStateToProps访问我的this.state.props会话阵列？
javascript、reactjs、react-native、redux、react-redux
我正在尝试存储一个Session对象数组。每个会话都有一个Hand对象数组。我正在尝试设置Redux存储，但由于某些原因，我无法使用mapStateToProps访问我的存储。this.props.*中的所有选项都与我的redux存储无关。 我的存储应该包含一个session对象数组，我希望在创建自定义FlatList之前在一个简单的FlatList中显示这些对象，以便理解这些概念。我给出了一个使用State的示例，但我不能让它与Redux一起工作。 我的{this.props.sessions}没有显示任何内容，我希望它像状态按钮一样显示会话的名称。 我尝试了很多不同的配置，包括翻阅thi
浏览 6提问于2019-06-10得票数 1
回答已采纳
2回答
从redux - Reactjs中的嵌套数据中获取单个对象
reactjs、redux、react-redux
我的redux存储中有以下数据：
data: [
0: {
name: "Mark Zuckerburg",
description: "Facebook CEO"
},
1: {
name: "Sheryl Sandberg",
description: "Facebook COO"
},
2: {
}
]
以下是我在reducer中的代码：
// This is how I store my data lists
浏览 2提问于2017-02-19得票数 0
1回答
React/Redux:存储在从单个onClick事件调用的操作之间没有更新
redux、react-redux、state
目标
单击next按钮并将两个操作分派到redux存储区，如下所示：
首先，更新skipAmount值。
然后使用更新的skipAmount值生成apiQuery (用于向服务器发出请求的字符串)。
问题
在操作1和2之间没有更新skipAmount值。
示例
我创建了一个CodeSandbox，它清楚地说明了我所面临的问题。注意，skipAmount值是apiQuery之前的100 (或单击事件)。
代码
Index.js
import React from "react";
import ReactDOM from "react-dom";
浏览 3提问于2018-05-30得票数 0
回答已采纳
3回答
使用redux和react的无限滚动
javascript、reactjs、npm、redux、single-page-application
我正在尝试在一个基于react的应用程序中实现无限滚动，该应用程序使用Redux进行状态管理。我正在尝试在页面滚动上分派一个操作。但不能达到同样的效果。我的代码在这里
// The Reducer Function
const pinterestReducer = function (state=[], action) {
if (action.type === 'SET_CONTENT') {
state = action.payload;
}
return state;
}
const appReducer = combineRed
浏览 0提问于2017-03-12得票数 0
2回答
使用redux在秒表上占用一段时间并将其放入数据库
javascript、node.js、reactjs、redux
有人建议我使用redux将时间放到数据库中，但我遇到了问题。我的index.js中有一个秒表，用户可以启动和停止。之后，我有一个按钮，让他们能够把他们的时间放在一个数据库。从我的节点文件中，我得到了UnhandledPromiseRejectionWarning: error: null value in column "time" violates not-null constraint。我想知道这是因为我在索引文件的末尾有difference = 0，它没有检索difference = this.state.endTime - this.state.startTime;，或
浏览 2提问于2021-01-21得票数 0
回答已采纳
1回答
Redux:为什么我们需要动作？
javascript、redux、ngrx
我正在与NgRx合作实现Redux。我正在尝试理解redux模式。为什么我们需要调度一个操作？为什么我们不能直接从下面的服务代码调用userReducer函数，传递正确的操作呢？谢谢! 服务代码： this.store.dispatch(new userActions.SetName({"bob"}) user.action.ts： readonly type = UserActionTypes.SET_NAME
constructor(public payload: string) { }
} user.reducer.ts： export func
浏览 12提问于2020-11-11得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
