React-redux:带有变量的操作
React-redux是一个用于管理React应用状态的库。它结合了React和Redux，提供了一种可预测的状态管理解决方案。
React-redux的核心概念是"store"、"action"和"reducer"。
- Store（存储）：存储应用程序的状态数据。它是一个JavaScript对象，包含了整个应用程序的状态。通过使用Redux的createStore函数来创建一个store。
- Action（动作）：描述发生了什么事件的对象。它是一个包含type属性的普通JavaScript对象。通过调用action creator函数来创建一个action。
- Reducer（归约器）：根据action来更新store中的状态。它是一个纯函数，接收当前的状态和action作为参数，并返回一个新的状态。通过使用Redux的combineReducers函数来组合多个reducer。
React-redux提供了两个主要的组件来连接React组件和Redux store：
- Provider组件：在应用程序的最顶层包裹，将store作为props传递给所有的子组件，使得子组件可以访问到store。
- Connect函数：一个高阶函数，用于连接React组件和Redux store。它接收两个参数：mapStateToProps和mapDispatchToProps。mapStateToProps将store中的状态映射到组件的props，mapDispatchToProps将action creator映射到组件的props。
React-redux的优势包括：
- 简化状态管理：通过使用Redux的单一数据源和不可变状态的概念，React-redux简化了状态管理，使得应用程序的状态变得可预测和可维护。
- 提高性能：React-redux使用了"浅比较"来检测状态的变化，只有当状态真正发生变化时，才会重新渲染相关的组件，从而提高了性能。
- 可扩展性：React-redux的架构使得应用程序的状态和业务逻辑分离，使得应用程序更易于扩展和维护。
React-redux的应用场景包括但不限于：
- 大型应用程序：对于复杂的应用程序，React-redux提供了一种结构化的方式来管理状态，使得代码更易于组织和维护。
- 跨组件通信：React-redux提供了一种统一的方式来管理组件之间的通信，通过共享状态和派发action来实现。
- 异步数据流：React-redux结合了Redux的中间件机制，可以方便地处理异步操作，如网络请求和定时器。
腾讯云提供了一系列与React-redux相关的产品和服务，包括：
- 云服务器（CVM）：提供可扩展的虚拟服务器，用于部署React-redux应用程序。
- 云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库，用于存储React-redux应用程序的数据。
- 云函数（SCF）：提供无服务器计算服务，用于处理React-redux应用程序的后端逻辑。
- 云存储（COS）：提供高可靠、低成本的对象存储服务，用于存储React-redux应用程序的静态资源。
更多关于腾讯云产品和服务的详细信息，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
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回答
不变冲突:在"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
1回答
如何将react与redux连接起来？
react-native、react-redux、store
因此，我正在尝试学习使用react-native的react-redux，并且我想创建一个页面，在那里我可以输入一个数字并按下登录。当我按下login时，页面会提醒我输入的数字并保存到我用redux创建的商店中。
有人能告诉我我做错了什么吗?我应该添加什么或做些什么才能让它正常工作？
下面是我的测试页面
import React, {Component} from 'react';
import {View, TextInput, TouchableOpacity, Text} from 'react-native';
import {connect} from
浏览 1提问于2018-09-12得票数 0
1回答
将参数传递给更新存储在react-redux中的方法
reactjs、redux、react-redux、redux-thunk
我希望用户能够输入文本到输入框，并在此基础上想要搜索的api。我使用的是redux和redux-thunk。我不确定应该如何将作为参数输入的文本传递给API调用。
如果我没有使用redux和thunk，我会将组件的状态设置为
this.state = {
movie: ''
}
然后在input type=text上，我会用e.target.value更新movie值onChange。在redux中使用react时应该采取什么方法？
我的代码如下所示。
import React, {Component} from 'react';
import {ren
浏览 8提问于2017-01-17得票数 0
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 connect()无法传递道具
javascript、reactjs、ecmascript-6、redux、react-redux
我试着学习redux体系结构，但是我在最基本的东西上失败了。
我创建了类HomePage，并使用()将其连接到存储的状态和调度。
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {HomeButtonClickAction} from "./HomeActionReducer";
import {connect} from "react-redux";
class HomePage extends Com
浏览 1提问于2018-01-19得票数 3
回答已采纳
1回答
反应动作、减速机及连接语法
reactjs、redux、react-redux、store、connect
我有以下的反应代码，以创建一个booleen真/假在Redux商店，然后用来打开/关闭一个材料UI抽屉/侧菜单。
我是新的反应，我想问我所做的是正确的，或者我是否犯了明显的错误等等。
注意:解决方案有效(它按预期打开/关闭抽屉)。我只想知道我是否应该以不同的方式编码.另外，我还删除了一些代码，这样就可以更容易地读懂.
行动档案：
export const setDrawerPopOutMenuStatus = {
type: 'DRAWER_POPOUT_MENU_STATUS'
}
减速机档案：
import { combineReducers } from '
浏览 0提问于2017-09-25得票数 0
回答已采纳
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
回答已采纳
1回答
如何在本机反应中编写功能单元测试用例？
react-native、unit-testing、jestjs、enzyme、testcase
我是新来的反应本地人。我实现了功能和快照单元测试，但不确定如何编写函数级和API级单元测试用例。我用的是酶和玩笑。此外，我还使用了redux作为国家管理。
下面是我的几份文件。
App.js
/* eslint-disable no-unused-vars */
/* eslint-disable no-use-before-define */
/* eslint-disable class-methods-use-this */
import React, { Component } from 'react';
import { StyleSheet, View } f
浏览 3提问于2020-03-02得票数 3
2回答
在容器组件模式中集成调度操作
reactjs、redux、react-redux
因此，我完全不明白如何集成容器和组件模式。我已经复习了整个上午的例子，似乎什么都没有点击。在我的第一个项目之前，我是如何使用React的？？在我的视图组件中获取数据，然后使用工作的@connect将数据作为道具传递给我，但在此时以“自动”的方式传递给我。
import React;
...
import {action} from 'path/to/action.js';
@connect((store) => {return{ key: store.property}});
export class Component{
componentWillMount()
浏览 3提问于2017-08-31得票数 1
回答已采纳
3回答
console.log(this.props.store)在我的create react应用程序中返回未定义？
reactjs、react-native、redux、react-redux、create-react-app
我创建了一个创建react应用程序，并包含了带有卡片列表的redux和一个显示过滤结果的搜索框，该应用程序在我添加redux之前工作正常，但现在它不返回任何结果。当I console.log(this.props.store)时，它返回未定义。如果有人能帮我这个忙，我会非常感激的。我的文件如下：
constants.js
export const CHANGE_SEARCH_FIELD = 'CHANGE_SEARCH_FIELD';
actions.js
import {CHANGE_SEARCH_FIELD} from './constants.js';
浏览 1提问于2020-06-12得票数 0
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
2回答
使用redux处理‘`onClick`’事件
reactjs、redux、react-redux
我刚开始使用redux，所以我只是尝试将redux应用到一个非常简单的应用程序中。只要点击按钮，它就会切换单词。但是，除了这个动作之外，我应该如何分派我的handleClick函数呢？现在，当我单击按钮时，什么都不会发生。
App.js
import React, { Component } from "react";
import { connect } from 'react-redux';
import MyButton from "./MyButton";
import { handleClick } from "./acti
浏览 4提问于2019-10-12得票数 1
回答已采纳
2回答
redux的@connect产生错误'connect.js:129Uncaught TypeError:无法读取未定义的属性‘存储’
reactjs、decorator、redux、react-redux、ecmascript-2016
当运行我的应用程序(成功地与webpack+babel捆绑并支持装饰器)时，控制台显示：
'connect.js:129 Uncaught TypeError: Cannot read property 'store' of undefined'
屏幕上没有其他任何东西显示所有的包都是最新的。
有什么想法吗？谢谢。
app.js：
import React from 'react'
import ReactDOM from 'react-dom'
import Main from './components/main.js
浏览 5提问于2016-07-03得票数 0
回答已采纳
1回答
React组件不呈现来自Redux存储区的新数据
reactjs、socket.io、redux、react-redux、immutable.js
这个问题之所以起作用，是因为在我通过websocket以redux存储的形式获得初始状态之前，会调用我的高级组件。因此，当我的组件处理状态时，它们只接收默认状态，这是一个空的不可变Map()。但是，在某个时候，我从服务器接收到存储，从我的action_creators调用action_creators，这是由还原器处理的，它将存储合并到本地存储中。使用redux记录器记录整个进程。请看相关的截图。您可以看到，本地状态已经更改，但组件不会被重命名。
<-组件状态是高级组件接收的内容。
我知道我的操作和还原器在某种程度上起作用，因为如果我将本地JSON文件与本地存储合并，组件接收的状态不仅
浏览 2提问于2017-04-01得票数 1
回答已采纳
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
回答已采纳
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
回答已采纳
5回答
Redux ReactJS :组件如何访问存储？
javascript、reactjs、redux、react-redux
首先，我在stackoverflow上看到了很多类似于我的问题，但我想我遗漏了一些东西，这就是我问这个问题的原因。 我在我的应用程序中有一个Maincomponent，它使用动作addDatas将数据添加到我的商店中。这个部分起作用了，我可以通过this.props在上下文和MainComponent的子目录中访问我的存储。但是当我访问OtherComponent (这是一个基本组件，我只想在其中显示在MainComponent中收集的所有数据)时，我的存储区似乎是空的。 有人能告诉我我做错了什么吗，以及当我使用MainComponent时，为了访问我在商店中设置的数据，OtherCompo
浏览 73提问于2017-12-27得票数 2
回答已采纳
2回答
如何判断redux的更改状态的另一个组件？
reactjs、redux、react-redux
我有两个组件reactjs，我创建了一个状态redux来处理这两个组件的状态。
`appcomponent.js
import React, { Component } from 'react';
import { createStore } from 'redux';
import { connect } from 'react-redux';
//reducer
export function get_user(state=[], action) {
switch (action.type) {
case &
浏览 0提问于2017-11-14得票数 0
2回答
我怎么能等到reducer存储分配完成？
react-native、react-redux、redux-thunk
我使用react-native和redux和redux-thunk。基本上，我有一个连接到store的Component，它用dispatch修改其中的一些信息。尽管每个操作似乎都是同步的，但我在修改后的下一行上获得了旧数据。
//reducer
import {assign as _assign} from 'lodash-es';
let initialState = {name: '1'};
export default (state = initialState, action) => {
switch (action.type) {
浏览 0提问于2017-09-26得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
活动推荐
腾讯云开发者
