React - Redux在单击和重新渲染时获取数据
React-Redux是一个用于构建用户界面的JavaScript库。它结合了React和Redux两个流行的库，提供了一种可预测的状态管理解决方案。
在React-Redux中，当用户单击或重新渲染时获取数据，可以通过以下步骤实现：
- 在React组件中，使用React-Redux提供的connect函数将组件连接到Redux的store。这样可以让组件访问Redux中的状态和操作。
- 在Redux中，定义一个action，用于触发数据获取的操作。这个action可以是一个简单的JavaScript对象，包含一个type字段和一些可选的payload字段。
- 在Redux中，定义一个reducer，用于处理这个action并更新状态。reducer是一个纯函数，接收当前状态和action作为参数，返回一个新的状态。
- 在React组件中，通过调用Redux的dispatch函数，触发定义的action。dispatch函数会将action发送给reducer进行处理。
- 在Redux中，使用中间件（如redux-thunk或redux-saga）来处理异步操作。例如，可以在action中发起一个异步请求获取数据，并在请求完成后再触发另一个action来更新状态。
- 在React组件中，通过使用React的生命周期方法（如componentDidMount）或React Hooks（如useEffect）来监听状态的变化，并在变化时重新渲染组件。
总结起来，React-Redux在单击和重新渲染时获取数据的流程如下：用户单击触发组件中的事件处理函数，事件处理函数调用Redux的dispatch函数触发action，action经过中间件处理后，触发reducer更新状态，React组件监听状态的变化并重新渲染。
React-Redux的优势在于它提供了一种可预测的状态管理方案，使得数据流动更加清晰和可控。它能够帮助开发者更好地组织和管理应用的状态，提高代码的可维护性和可测试性。
在腾讯云中，推荐使用云函数SCF（Serverless Cloud Function）来处理React-Redux中的异步操作。云函数SCF是一种无服务器计算服务，可以在云端运行代码，无需关心服务器的管理和维护。通过使用云函数SCF，可以将异步请求等耗时操作放在云端执行，提高应用的性能和可靠性。
腾讯云云函数SCF产品介绍链接地址：https://cloud.tencent.com/product/scf
请注意，以上答案仅供参考，具体的实现方式和推荐的产品可能会因实际需求和场景而有所不同。
相关·内容
2回答
无法在react-redux中调度事件
javascript、reactjs、react-redux
我是redux的新手，我正在尝试在react组件中的按钮单击事件上分派操作。但是我不能更新我在reducer中的状态。 types.js export const FETCH_USERS_SUCCESS='FETCH_USERS_SUCCESS'; action.js import {FETCH_USERS_SUCCESS} from './types';
export const fetchUsersSuccess = () =>
{
return (
{
type:FETCH_USE
浏览 21提问于2020-08-30得票数 0
1回答
如何用正确的方式处理异步函数，在‘`redux`’中实现‘`thunk`’？
reactjs、react-redux、redux-thunk
这是我的商店，实现了thunk
store/index.js
import { createStore, applyMiddleware } from "redux";
import reducer from "../reducers/";
import thunk from "redux-thunk";
const store = createStore(reducer, applyMiddleware(thunk));
export default store;
以下是我的行动：
actions/index
export const rem
浏览 0提问于2018-09-13得票数 0
回答已采纳
2回答
Redux操作无法识别状态
javascript、reactjs、redux
我一直在构建一个React和Redux应用程序。我创建了一个简单的容器和一个操作创建器，其中包含一个带有简单console.log()的操作，该用户是我在状态(reducer)中写下的用户之一。
问题是，当我单击渲染状态时，它显示'user‘is not defined。为什么？我该怎么做才能让函数识别状态呢？
容器
import React, { Component } from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-red
浏览 13提问于2018-08-13得票数 0
回答已采纳
1回答
连接react redux到无状态组件。函数中的属性未被更新。
react-native、redux、react-redux、redux-thunk
问题：
我有一个非常简单的应用程序。有一个动作--加法。添加任务时，我模拟使用setTimeout将其发送到服务器。
当我收到来自服务器的响应时，我立即检查是否存在错误，以避免进一步的操作。在有状态组件中，一切都正常工作，而在无状态组件中则不工作。
查看代码以更好地理解问题。
环境：
"react": "16.8.6",
"react-native": "0.60.5",
"react-redux": "^7.1.1",
"redux": "^4.0.4",
"
浏览 0提问于2019-09-16得票数 0
回答已采纳
2回答
react挂钩带有redux，状态未更新
javascript、reactjs、redux、react-redux、react-hooks
我有一个简单的部分，在点击我想要更改redux状态
这是我的解决方案，demo.js
import React from "react";
import { useDispatch } from "react-redux";
import actions from "store/actions";
function Demo() {
const dispatch = useDispatch();
const handleCampaigns = () => {
dispatch(actions.sliderActions.s
浏览 20提问于2021-05-26得票数 0
回答已采纳
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
回答已采纳
2回答
路由"onEnter“是在加载路由后加载数据。
reactjs、react-router
我用的是redux和路由器。在加载路由之前，我还会进行一个API调用来加载数据。从技术上讲，我的数据应该先加载，然后我的路径应该加载。但是，我发现它首先加载路由，然后从API加载数据。以下是代码详细信息。
index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from 'react-redux';
import {ReduxRouter} from "redux-react-router";
import
浏览 4提问于2016-04-13得票数 0
回答已采纳
1回答
如何从下拉react/redux中更新产品列表
javascript、reactjs、redux
我试图理解如何使用react/redux筛选项目列表。我已经构建了这个示例
当我单击该类别时，产品category_id等于类别id，然后返回相同id的产品
action.js :-
export const selectCategory = (data) => {
console.log("You clicked on category: ", data.name);
return {
type: 'CATEGORY_SELECTED',
payload: data
}
}；
reducer-category.js
export de
浏览 0提问于2018-12-19得票数 0
回答已采纳
1回答
反应-Redux:如何设置状态？
reactjs、redux、redux-reducers
我试图理解其他人的代码，但很难理解Redux和Redux之间的交互。
在React页面上，我调用一个名为getSubscriptionPlan的Redux操作。在这个Redux操作中，我看到它能够加载正确的数据(在下面的1点)。这使用了一个减速器，在其中我可以再次确认正确的数据在那里(在下面的2点)。
然后逻辑返回到React页面(下面是3点)。现在，我希望能够在Redux存储中找到前面提到的数据。但是，我找不到任何地方列出的数据..。无论是在this.state (我期望的地方)，还是在this.props中。减速机是不是没有更新商店的状态.？
我做错了什么，如何才能让数据指向下面的3？
R
浏览 4提问于2022-03-19得票数 0
回答已采纳
1回答
由于什么原因，React-Redux中的调度比另一个调度先被调用
javascript、reactjs、react-redux
我构建了一个Pokedex，运行良好，但是，我在React-Redux Dev工具中看到了一个“问题”： ? "getPokemonsInfo“在"getPokemonsUrls”之前被调用，但是，"getPokemonsInfo“应该只在状态的属性发生变化时调用(使用useEffect())，而这种情况发生在"getPokemonsUrls”中。 import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-r
浏览 6提问于2021-01-23得票数 1
回答已采纳
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
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
2回答
如何对REST执行异步axios调用并更新存储(redux令人困惑)？
javascript、reactjs、redux、axios、redux-thunk
所以，我必须对REST提出一个异步请求，我读过redux thunk的文章，但是我仍然有点困惑，所以我试图在减速机内部提出一个异步请求。
下面是一个工作示例，它返回普通的json对象
return Object.assign({}, state,
{ texts: state.texts.concat({ data: 'some text'}) })
但是当涉及到网络请求时，它不会产生任何错误，它只是看起来返回不工作，所以这就是为什么我的组件不能更新
axios.get('https://dog.ceo/api/breeds/image/random').t
浏览 1提问于2019-08-25得票数 1
回答已采纳
2回答
Axios & Redux返回未定义，然后解决
reactjs、redux、react-redux、axios、redux-thunk
我正在使用react & redux创建一个系统，其中我需要从api获取一些数据，我创建了操作/函数和reducer，但当我尝试访问组件上的结果和控制台日志时，它显示未定义的结果比解析显示了三次，而当我尝试映射结果时，当然不能，因为此处未定义的thing.enter图像描述。 这是我的action函数代码。 import axios from "axios";
import Cookies from "js-cookie";
export const signIn = () => {
return {
type:
浏览 16提问于2021-04-17得票数 1
回答已采纳
2回答
useSelector钩子首先返回未定义的状态，在操作调用之后正确返回状态。
javascript、reactjs、redux、react-redux
我刚接触了React，我尝试将我的项目与redux集成，问题是在我用于登录的函数组件中，当我尝试用initialState获取useSelector属性时，状态是未定义的。
import React, {useState} from 'react';
import loginStyles from './login.module.css';
import {useDispatch , useSelector, shallowEqual} from 'react-redux';
import {login} from '../../stor
浏览 8提问于2020-04-21得票数 1
回答已采纳
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回答
React :操作创建者未调用reducer
javascript、reactjs、redux
我在我的动作创建器中进行了一个异步调用，并用结果调用了我的reducer，但由于某种原因，我无法理解reducer没有被调用。
actions.js (动作和动作创建者)
export const GET_FORMS = 'GET_FORMS'
export function getForms() {
$.get("server url", function(result) {
return {
type: GET_FORMS,
formlist: result.data.forms
}
})
}
reducers.
浏览 0提问于2015-11-20得票数 3
回答已采纳
1回答
redux getState()不返回更新后的状态
javascript、reactjs、react-native、redux、getstate
让我困了几天的问题是，虽然我的redux devtool显示了成功的状态更新，没有任何类型的变化，并且成功地重新呈现了视图组件，但是当我调用getState()时，它总是返回初始状态，而不关心更新的状态！任何人谁知道什么可以造成这种情况，请帮助我。
我使用react-redux和redux-thunk
action.js
export function test(data) {
return {
type: 'TEST',
data
};
}
export function testFunc(data) {
return dispatch =>
浏览 4提问于2018-04-18得票数 9
回答已采纳
2回答
如何在单击按钮时调度操作？
reactjs、redux
//action code
export const CLEAR_COMPLETED = 'CLEAR_COMPLETED'
export const clearCompleted = () => {
return{
type: CLEAR_COMPLETED
}
}
//reducer code
case CLEAR_COMPLETED:
return state.map(todo => {if (todo.completed)
{return {...todo, show:false}}
浏览 0提问于2017-12-11得票数 2
1回答
在react+redux app的Home component中，在component component上调用操作getPosts()后，this.props.posts未定义
javascript、django、reactjs、redux、react-redux
我正在尝试制作一个博客风格的应用程序。我正在运行一个django服务器，并试图创建一个react-redux前端。我正在使用redux-devtools，当我注释掉错误代码时，redux似乎具有状态中的数据。不确定哪里出了问题。此外，我使用redux-thunk和axios与后端通信。我几乎是在抄袭youtube的教程。这是reducer reducers/posts.js
import {GET_POSTS} from "../actions/types";
const initialState = {
posts: []
}
浏览 16提问于2019-07-15得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
