React Redux和副作用解释
React Redux是一个用于管理应用状态的库，它结合了React和Redux两个流行的前端开发工具。React是一个用于构建用户界面的JavaScript库，而Redux是一个用于管理应用状态的容器。
副作用是指在函数执行期间，除了返回值之外对外部环境产生的可观察的变化。在React Redux中，副作用通常指的是与应用状态无关的操作，例如发送网络请求、访问浏览器缓存、修改全局变量等。
React Redux使用了Redux的核心概念，包括store、action和reducer。store是一个包含应用状态的对象，action是描述状态变化的对象，reducer是根据action来更新状态的纯函数。通过将React组件连接到Redux store，React Redux可以将store中的状态映射到组件的props，并且在状态变化时自动更新组件。
React Redux的优势在于它提供了一种可预测的状态管理方式，使得应用的状态变化变得可控和可追踪。它可以帮助开发者更好地组织和管理应用的状态，提高代码的可维护性和可测试性。
React Redux适用于中大型的前端应用，特别是那些需要共享状态和处理复杂交互逻辑的应用。它可以与各种前端框架和库配合使用，例如React Native、Vue.js等。
腾讯云提供了一系列与React 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
回答已采纳
我有两个组件，一个是应用程序组件，另一个是计数器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
我已经在我的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
回答已采纳
我已经编写了基于内部状态的React应用程序。它使用"axios“库从Web中获取数据。它看起来如下：
class OrdersTable extends React.Component {
constructor() {
super();
this.state = {
orders: [],
...
}
componentDidMount() {
setTimeout(() => {
axios.get("http://localhost:1234/api/orders").then(r
浏览 0提问于2018-07-19得票数 1
回答已采纳
我正在学习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回答
我正在考虑在React中构建一个相当复杂的图表组件，我希望它能够跨许多不同的项目进行修复。不用说，这样的组件有许多需要管理的状态。
Redux似乎非常适合这一点，但是如果我只是将顶级容器包装在一个带有自定义商店的提供者中……如果组件包含在更大的React/Redux应用程序中，组件的内部redux存储不会干扰全局应用程序状态吗？
import React, { Component } from 'react';
import { createStore } from 'redux';
import { Provider } from 'react-red
浏览 10提问于2016-05-04得票数 3
回答已采纳
我正在尝试存储一个Session对象数组。每个会话都有一个Hand对象数组。我正在尝试设置Redux存储，但由于某些原因，我无法使用mapStateToProps访问我的存储。this.props.*中的所有选项都与我的redux存储无关。 我的存储应该包含一个session对象数组，我希望在创建自定义FlatList之前在一个简单的FlatList中显示这些对象，以便理解这些概念。我给出了一个使用State的示例，但我不能让它与Redux一起工作。 我的{this.props.sessions}没有显示任何内容，我希望它像状态按钮一样显示会话的名称。 我尝试了很多不同的配置，包括翻阅thi
浏览 6提问于2019-06-10得票数 1
回答已采纳
1回答
当使用“react路由器-redux”时，如何获得当前位置？
这是routing状态：
{
routing: {
locationBeforeTransition: {
pathname: "/foo",
search: "",
hash: "",
state: null,
action: "PUSH",
key: "e8jfk"
}
浏览 1提问于2016-08-19得票数 5
回答已采纳
当我在控制台中使用产品API中的数组方法(如map、filter等)时，以及在浏览器中没有得到任何信息时，我都会出错。我在这里使用redux-toolkit/query在我的Reactjs应用程序。我在我的系统中使用了react 18版本和Node.js 16版本。
Home.js
import React from "react";
import { Error, Loader, Products } from "../components";
import { useGetAllProductsQuery } from "../redux/
浏览 5提问于2022-11-03得票数 1
2回答
在我的应用程序中，我使用了React和Redux (以及用于异步任务的Redux-thunk )。因此，当我需要将一些数据写入store作为component交互的结果时，我会同时使用action和reducer。但它总是必要的吗？尤其是在对修改后的字段没有connect的情况下，component？我总是需要action和reducer将一些数据写入store吗？或者，也许有一种类似于setState in store的方法
浏览 7提问于2016-11-15得票数 0
回答已采纳
我有以下代码。它使用的是较旧版本的React，但是为什么redux存储状态!!this.state.checked在render()中显示为false ...尽管defaultState是true index.js import ReactDOM from 'react-dom';
import React from 'react';
import { createStore } from 'redux';
const defaultState = { checked: true };
const reducer = (state = d
浏览 16提问于2020-11-05得票数 0
回答已采纳
我是redux的新手，我正尝试在我的react应用程序中实现一个小概念。我已经收到了来自调度和它的订阅的数据。如何将订阅数据打印到UI。下面的代码不起作用，错误在哪里，以及如何解决。
import React, { Component } from 'react';
import { createStore } from 'redux';
export default class App1 extends Component {
render() {
const initalState={items:
浏览 0提问于2018-07-02得票数 0
回答已采纳
4回答
我只想从api中获取数据并在前端显示。我使用Redux调用api，使用它的操作和还原器。在还原器中，我把intialstate作为空的array.When API成功调用，我正在更新存储state.Below是一个实用的，它可以帮助理解概念。
store.js
import { createStore } from 'redux';
import reducer from './reducers/reducer';
let store = createStore(reducer)
export default store
actions.js
import {
浏览 1提问于2018-11-13得票数 0
有人建议我使用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商店里删除了一件物品。但是它不会重新呈现应用程序。如果我手动更改应用程序，那么删除的项目就会消失。我正在做这个方法来阅读和不阅读信息。但效果很好。删除也是工作，但它不是重新渲染应用程序自动。如果我手动触发重呈现，那么消息就消失了。
Reducer.js
import { combineReducers } from 'redux'
import {
DELETE_MESSAGE,
ADD_MESSAGE,
READ_MESSAGE,
UN_READ_MESSAGE,
ARCHIVED_MESSAGE,
UN_ARCHIVED_MESS
浏览 0提问于2019-04-01得票数 1
2回答
我已经创建了一个菜单组件，我想让redux管理它的状态。
我有一个MenuStore，看起来像这样：
export interface MenuState {
isOpen: boolean;
}
interface ToggleMenuAction {
type: 'TOGGLE_MENU';
isOpen: boolean;
}
export const actionCreators = {
toggleMenu: (): AppThunkAction<ToggleMenuAction> => (dispatch
浏览 2提问于2017-09-20得票数 0
回答已采纳
我希望用户能够输入文本到输入框，并在此基础上想要搜索的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回答
我有以下问题:我制作了一个减轻switch (){ case 1: case 2:}行为的组件。我希望我的组成部分对国家的变化作出“反应”。我用的是Redux。事情是这样的：
// Switch component
import { Fragment } from 'react'
export const Switch = props => {
const children = Array.isArray(props.children) ? props.children : [props.children];
return children.find(c
浏览 2提问于2022-08-09得票数 1
1回答
我的应用程序中有几个操作，从API中获取数据。如果操作是取的，我将在我的redux存储中设置一个“加载”-attribute。现在我想显示一个网络指示器，这个应用程序正在获取数据。
我找到了一个快速而肮脏的解决方案，但我确信，这不是这样做的方法：
import React, { Component } from 'react';
import { AppRegistry, StatusBar } from 'react-native';
import { Provider } from 'react-redux';
import { create
浏览 2提问于2017-10-04得票数 0
回答已采纳
2回答
似乎我在React/Redux中遇到了一个非常常见的问题。有很多人都有这个问题，但原因可能有很大不同，所以我找不到可能的解决方案。我正在尝试建立一个具有列表的网页，该列表可以通过按向上和向下按钮重新排序。
我已经设法跟踪更新的状态(数组)，直到reducer，但组件没有更新。我认为我没有正确地更新组件的状态。
下面是我的组件：
import React, { Component } from 'react';
import { connect } from "react-redux";
import { bindActionCreators } from
浏览 4提问于2018-02-05得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
