分派thunk返回到组件
是指在React应用中，使用Redux中间件thunk来处理异步操作并将结果返回给组件。
Thunk是一种特殊的函数，它包装了一个表达式，使其能够被延迟执行。在Redux中，thunk允许我们在action创建函数中返回一个函数而不是一个普通的action对象。这个返回的函数可以接收dispatch和getState作为参数，并且可以在其中进行异步操作。
使用thunk可以解决在Redux中处理异步操作的问题。当我们需要在Redux中进行异步操作时，可以创建一个thunk action创建函数，该函数可以在内部进行异步操作，然后根据操作结果分派相应的action给Redux store。这样，组件就可以通过订阅Redux store来获取异步操作的结果。
优势：
- 简化异步操作：thunk使得在Redux中处理异步操作变得简单，不需要引入其他复杂的中间件或库。
- 统一的数据流：使用thunk可以保持Redux中的数据流一致性，所有的操作都通过分派action来触发，便于状态管理和调试。
应用场景：
- 异步数据获取：当需要从服务器获取数据时，可以使用thunk来处理异步请求，并将结果返回给组件。
- 延迟分派action：有时候需要在一定条件下才分派action，可以使用thunk来延迟分派。
推荐的腾讯云相关产品和产品介绍链接地址： 腾讯云函数计算（SCF）：https://cloud.tencent.com/product/scf 腾讯云云开发（CloudBase）：https://cloud.tencent.com/product/tcb 腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
相关·内容
3回答
我正在研究thunk，并试图弄清楚如何实现api调用。它不起作用，所以我又回到了最基本的地方。当我点击按钮时，它在控制台中显示'Getting here!，但当我console.log(dispatch)时什么也没有显示。我是不是漏掉了什么？
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware } from 'redux';
import { connect, Provider } from &
浏览 1提问于2017-01-11得票数 14
回答已采纳
我正在使用redux的react。在redux层，我使用thunk。因此组件调用操作，redux操作调用新的层->服务。该服务处理http调用。当响应正常时-我使用thunk提供的分派并返回到reducer。当响应是错误时，我想要重定向用户，但我找不到这样做的方法。我错过了路由器和它的替换方法。
浏览 3提问于2018-03-07得票数 0
2回答
我有以下操作创建者，由于某种原因，调度中的代码没有执行，尽管我知道loginSuccess()被调用是因为第一个警报触发了。我做错了什么？
import facebook from '../api/facebook'
import * as types from '../constants/ActionTypes';
export function loginSuccess() {
alert("This alerts fine");
return dispatch => {
alert("This doesn&#
浏览 3提问于2016-08-04得票数 3
回答已采纳
所以我知道，基本上，redux-thunk可以返回一个函数，而不是动作创建者中的一个动作，这样我们就可以向状态发送一些东西(例如，当一个承诺被解决时)。我不明白的是，为什么在使用redux-thunk时，我们不需要显式地在组件中执行mapDispatchToProps并分派操作(有人告诉我redux-thunk已经在调度)。有人能解释一下这是怎么回事吗？
浏览 0提问于2018-03-06得票数 0
回答已采纳
2回答
我正在努力将redux store连接到react-native应用程序中，但似乎遗漏了一些东西。任何帮助都将不胜感激。
action.js
export const getdata = (data) => {
return (dispatch, getState) => {
dispatch({
type: "GET_DATA",
data
});
};
};
reducer/dataReducer.js
export default (state = {}, action) => {
浏览 4提问于2017-06-23得票数 0
1回答
我用的是react，redux，redux和redux.
我的代码看起来是：
function thunkFunction(){
return(dispatch) => {
dispatch(toggleSmth(false));
dispatch(toggle2Smth(false));
SomeService.getSmth()
.then(response => {
dispatch(oneMoreAction);
dispatch(one2MoreAction);
}
}
}
现在，我在某个
浏览 0提问于2017-08-11得票数 0
我可以从Redux状态返回值，当我进行API调用时，我会看到这些值正在注销，但状态没有更新。我用Redux商店建立了一个基本的应用程序来证明这一点。我还包括了Thunk库，它是异步状态操作(比如API)所必需的。我的猜测是，在还原器的末尾，我没有正确地返回状态，因为再次，如果我记录这些值，就会返回详细信息。
为了尽可能地合并代码，我只包括必要的部分：
export default function App() {
const OtherVal = useSelector((state) => state.reducer2.WorkoutDetails);
const d
浏览 3提问于2022-02-10得票数 0
回答已采纳
2回答
我正在尝试找出为什么我无法从redux-thunk接收到本应传递的dispatch()函数。我尝试了几个不同的编码教程，但似乎都不适合我，但我确实注意到有几种不同类型的实现。
所以我的问题很简单，为redux-thunk编写异步函数以确保调度被调用的整体正确方法是什么？
注意:我可以调用操作创建者，但错误: 1)调度不是操作2)操作需要是纯对象
我对我所要求的是redux异步操作的理解。
const getAttributes= () => {
return (dispatch) => {
return (/* Some async stuff */);
}
}
浏览 0提问于2018-04-30得票数 0
这是我的商店，实现了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
回答已采纳
我在我的项目中使用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-thunk允许您创建返回函数而不是操作的操作创建器。内部函数接收存储方法dispatch和getState作为参数。
function incrementAsync() {
return (dispatch, getState) => {
setTimeout(() => {
dispatch(increment());
}, 1000);
};
}
但与此同时，react-redux的connect已经有了一个mapDispatchToProps参数，可用于将操作创建器包装到调度调用中，以便可以直接调用它们。使用mapDispat
浏览 0提问于2017-06-12得票数 4
我正在尝试让我的应用程序不会抱怨action没有未定义的类型属性。
我设置了我的客户端渲染，如下所示：
import React from 'react';
import ReactDOM from 'react-dom';
import routes from './shared/routes';
import rootReducer from './shared/reducers';
import thunk from 'redux-thunk';
import { createStore, applyMidd
浏览 1提问于2016-09-14得票数 1
回答已采纳
2回答
我正在学习redux异步操作，我想从API (我的本地数据库)中获取数据，不幸的是，使用redux-thunk中间件数据获取数据是不被获取的，但是没有抓取中间件数据。
下面是使用thunk中间件的动作创建者，，它不工作
// retriev comments
export const fetchComments= () =>{
return dispatch =>{
dispatch(fetchCommentsRequest);
axios.get('/api/v1/todo')
.then(response =>{
c
浏览 5提问于2020-06-22得票数 0
回答已采纳
我是react & react-native的初学者。我正在使用react 16，react-thunk，react-redux。
我正在尝试从firestore中获取我已经创建的类别。首先，我使用connect()调用action，然后，我使用thunk输入action，也从firestore获取数据。最后，我在reducer中返回了新状态。当然，我不知道redux过程，所以请给我一些提示。
这是我的代码。谢谢。
CategoryImageList.js (组件)
...
class CategoryImageList extends Component {
component
浏览 40提问于2018-06-03得票数 0
回答已采纳
在redux存储中，我可以将Thunk用于异步状态：fetching_data，并执行render()来阻止元素。
但我认为这需要做很多工作。如果我有许多blockUi组件。
有什么最佳实践可以让它像一样简单
$('#container-1').blockUi();
$('#container-1').unBlockUi();
$('#container-2').blockUi();
$('#container-2').blockUi();
浏览 3提问于2016-08-21得票数 1
回答已采纳
我得到了错误：
Actions may not have an undefined "type"属性
但我肯定我给它下了定义并拼写正确。
应用程序：
import React, {Component} from 'react';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import { AsyncStorage } from 'react-na
浏览 4提问于2016-11-06得票数 0
我有一家有9台减速机的商店。我只想让我的组件听其中一个discoverSearch。使用mapStateToProps的速记版本，这是我的代码。然而，该组件仍在componentWillReceiveProps中交付所有减速器。
组件
import React from 'react'
import { connect } from 'react-redux'
import { View, Text, Animated, Dimensions } from 'react-native'
const _ = require('lodash
浏览 1提问于2018-01-20得票数 1
回答已采纳
我将开发一个带有表格和许多其他组件的面板，这些组件反应为spa和redux以及其他相关内容，我将使用Swr(一个很酷的包)来获取远程数据并缓存它。
我们使用一个钩子(useSwr)来捕获远程data1，在接收到data1之后，我们使用有效负载data1分派简单的操作来存储持久化data1，并做redux的事情来让其他组件知道。
还考虑到如果我们想在其他组件上做其他事情，基于收到的data1，我们使用useSelector(有许多其他方法)来检查data1是否有效，然后我们使用swr来获取data2、data3或任何其他相关的业务请求。
问题是:甚至不再意味着使用thunk或saga？因为我们使
浏览 0提问于2020-07-17得票数 1
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
1回答
我不明白为什么需要像redux-thunk这样的东西。据我所知，thunk是一个返回函数的函数。在我看来，包装的表达式和中间件的使用似乎更多地混淆了正在发生的事情。摘自redux-thunk的示例代码
import thunk from 'redux-thunk';
// Note: this API requires redux@>=3.1.0
const store = createStore(
rootReducer,
applyMiddleware(thunk)
);
// Meet thunks.
// A thunk is a function
浏览 1提问于2017-05-05得票数 35
我正在实现react引导表-next，并需要获得单击的标头列值以发送到数据库，以便在服务器端对其进行排序。我想将单击的列名传递给redux商店。我可以让值点击登录操作，但是我的状态不会在redux中更新。
import { createStore } from 'redux';
import reducer from '../../reducers/index';
const initialState = window.__INITIAL_STATE__; // eslint-disable-line
const store = createStore(red
浏览 1提问于2018-03-24得票数 0
1回答
我想要的是当用户点击一个按钮时改变路由。
代码非常类似于示例，并遵循了中引入的所有步骤。
reducer/index.js
import { combineReducers } from 'redux'
import { routerReducer as routing } from 'react-router-redux'
import entities from './entities'
const rootReducer = combineReducers({
entities,
routing
})
export defau
浏览 1提问于2016-08-30得票数 0
回答已采纳
如果在StackOverflow上有类似的问题，我很抱歉，但经过3个小时的搜索，我找不到一个。
我正在尝试学习Redux，并通过ReactJS的初学者熟练程度，并具有以下thunk功能：
export const listProducts = () => async (dispatch) => {
try{
dispatch({ type:PRODUCT_LIST_REQUEST })
const { data } = await axios.get('/api/products/')
dispatch({ type:PRODUCT_LIS
浏览 5提问于2021-10-26得票数 1
回答已采纳
假设这是我的推送： const thunk = async (dispatch,getState) =>{ 'some dispatch and await code'} 因此，当我想发送此消息时，我应该使用await dispatch(thunk)还是只使用dispatch(thunk) 从Redux-thunk和Redux的源代码来看，我认为我应该使用await dispatch(thunk)作为redux-thunk不会为我添加‘等待’。但是如果我不使用await会发生什么呢(它只是返回一个未决的承诺)，里面的代码会不会被thunk (来自Api的调度和拉取等)还
浏览 24提问于2021-07-17得票数 0
回答已采纳
2回答
在一个使用钩子设计的React中。我不认为需要中间件，或者我是不是遗漏了什么？
Redux-thunk逼近
const Component = () => {
const dispatch = useDispatch()
const user = useSelector(state => state.user)
useEffect(() => {
dispatch(getUserFromApiAndDispatch())
}, [])
return <div>{user}</div>
}
或者只是简单的
const Component = (
浏览 5提问于2021-11-27得票数 0
回答已采纳
1回答
我来自一个Angular2世界，那里有一些服务可以进行正常的数据加载等等，现在我正在使用React，Redux应用程序，并试图找出与Redux中的Angular2服务等价的东西( are )。是Redux-thunk吗？
浏览 2提问于2017-02-28得票数 1
1回答
我可以使用redux thunk和管理组件中的捕获错误吗？ const handleSubmit = (values) => {
try {
await dispatch(postLogin(values));
} catch (err) {
setError(true);
}
} 或者我应该在catch of the actionCreator中运行调度？ 谢谢。
浏览 5提问于2020-04-07得票数 0
1回答
在redux-saga中，我们可以像reducers一样运行saga。dispatch({type: 'SAGA_GET_POSTS', payload: 'all'})和所有与传奇相关的帖子都有posts.sagas.js。
我们能用redux-thunk做同样的事情吗？这样我们就不需要在组件中分派操作之前导入它们了？
浏览 0提问于2021-06-02得票数 0
注意，我使用dispatch()调用setStepPositionIndex()。当我将dispatch(...)删除为setStepPositionIndex()时，我希望setStepPositionIndex()中的分派调用将接收它传递的普通操作对象并分派它……
Alternatively，如果我删除setStepPositionIndex()中的dispatch()调用(并保留dispatch(setStepPositionIndex())，同时显式返回其中的纯actionObj，我将期望使用dispatch(setStepPositionIndex(actionObj))成功分派
，
浏览 132提问于2018-09-04得票数 0
回答已采纳
3回答
我刚开始试验，我在路上遇到了几个问题。
当我试图在路由更改上呈现异步数据时，分派的操作将被触发两次。首先是未定义的，而不是真正的数据。
这是我的店
import { createStore, combineReducers, applyMiddleware } from 'redux'
import createLogger from 'redux-logger'
import thunk from 'redux-thunk'
import { routerReducer, routerMiddleware, push } from 'r
浏览 5提问于2017-02-22得票数 1
回答已采纳
1回答
我是新来的，但我有一个问题，我不明白，它不能解决它。
问题是，当我想在我的行动中调度时，我遇到了一个错误，他说:
调度不是一个函数
是的，他没有被定义，这就是问题所在，为什么他没有被定义？
export const clearError = dispatch => {
console.log('clear error')
console.log(dispatch)
dispatch({
type: 'CLEAR_ERROR'
})
}
我从Main.js调用clearError动作，也许我的初始化不正确，
浏览 3提问于2020-04-07得票数 4
回答已采纳
1回答
我正在绑定操作创建者中执行基本验证。
const mapDispatchToProps = {
onSomething: (props) => {
if (performValidation(props)) {
return { type: 'SOME_ACTION' };
}
}
};
如果验证失败，并且我不返回要调度的操作，则会收到错误。
动作必须是普通的对象。使用自定义中间件进行异步操作。
这是意料之中吗？我可以通过使用thunk来解决这个问题，但是对于非异步条件分派来说，这似乎太过了。
浏览 1提问于2017-10-17得票数 1
回答已采纳
1回答
我的项目遇到了一个很大的问题，没有它就无法继续下去。
我有两个屏幕:例如，一个为主页，另一个为第二页。因此，在我的导航抽屉中有两个部分。
在主页中，我将状态保存到我的存储中，并获得以下内容：
object: {
fruits: ['apple', 'orange', 'banana'],
drinks: ['mojito', 'colar']
}
我想访问mainPage的商店，所以在我的第二个页面中，我这样做了：
store.getState()。
我得到了
object: {
fruit
浏览 6提问于2017-07-16得票数 0
这些configureStore函数和initialState参数之间有什么区别？
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import thunk from 'redux-thunk';
import rootReducer from '../reduc
浏览 4提问于2017-08-04得票数 0
回答已采纳
我正在尝试使用move my app将redux-react从纯react转换为redux-react。我为onClick创建了一个action和reducer，但是在尝试在开发模式下启动应用程序后，我得到了这个错误
Uncaught TypeError: Cannot read property 'type' of undefined at reducerDomMethods (manMethodsReducers.js:12)
哪一条是这条线？
switch (action.type) {
这是我的代码
减速机
export default function redu
浏览 10提问于2017-03-01得票数 10
回答已采纳
1回答
我有一个redux存储，它包含多个状态，由相同的api填充，但有多个端点。
我有一个带有多个组件的function应用程序，这些组件可以访问其中的一个状态，它们都通过向商店发送异步函数(redux-thunk)来调用对应的api挂载。
在App.js中使用多个组件。
问题:当所有组件挂载时，它们都并发地调用api，并且超过了在短时间内允许的最大调用数。因此，所有调用应答状态代码429:太多的请求。
*额外的注意事项:我正在开发一个新闻网络应用程序，并使用gnews.io api与多个搜索查询和端点来获取数据。
浏览 2提问于2022-06-17得票数 0
2回答
未执行调度redux
、、、、
当用户signUp时，我正在尝试提交表单。当单击submit按钮时，应执行操作创建器以启动异步操作，但实际上不会触发提交，也不会启动操作创建器。
actions.ts：
import { ActionTypes } from "./types";
import { SignUpUser, User } from "../apis/authentication";
import { AxiosError } from "axios";
import { Dispatch } from "redux";
export interfa
浏览 1提问于2019-09-10得票数 0
在我的应用程序中：
"devDependencies": {
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-es2016": "^6.24.1",
"babel-preset-react": "^6.24.1",
"bootstrap": "^4.0.0",
"browser-sync": "^2.2
浏览 0提问于2018-06-29得票数 3
回答已采纳
1回答
我有一个与Redux完全工作的React设置。在我的操作文件中，我使用调用第三方API。
在将我的表单组件连接到Redux store并尝试调用POST操作后，我收到一个错误消息，说我无法在undefined...Funny上调用，因为该操作仍然被调用，即表单在抛出此控制台错误后立即提交给第三方的应用程序接口。我已经查看了大量的S/O问题以及axios & redux-thunk文档，但看不到我遗漏了什么。下面是一些相关的代码：
actions.js
import axios from 'axios';
import _ from 'lodash'
im
浏览 0提问于2017-05-18得票数 0
由于我的API，我需要在两个单独的调用中获取数据。我有一个通用的redux-thunk异步操作，它接受参数，因此可以通过多种方式调用它。 ShowPeopleContainer： import { fetchPeople } from './actions';
import { getEmployees, getManagers } from './selectors';
const mapDispatchToProps = dispatch({
getData: () => {
dispatch(fetchPeople('emp
浏览 10提问于2019-04-24得票数 1
回答已采纳
1回答
我尝试在我的学习中处理ajax数据-- redux项目，我不知道如何分派一个操作并在组件中设置状态。
这是我的部件
import React, {PropTypes, Component} from 'react';
import Upload from './Upload';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as profileActions from '../../../act
浏览 2提问于2017-02-19得票数 3
回答已采纳
使用效果钩子用于执行诸如react中的网络请求之类的副作用。
redux-thunk中间件也用于执行诸如react中的网络请求之类的副作用。
我很困惑，它们的实际应用是否有什么不同，还是只是一个选择的问题。
浏览 6提问于2021-10-21得票数 1
1.生命周期回调的调用。I有如下代码：
// app.js
<Admin>
<Resource name="FooList" list={FooList} />
</Admin>
// FooList.js
class FooList extends React.Component {
componentDidMount () {
showNotification("foo")
}
}
export default connect(null, {showNotification}
浏览 0提问于2019-01-06得票数 3
回答已采纳
在下面的示例中，我希望组件在列表更新时重新呈现。但是，即使connect被传递了新的状态，它也不会重新呈现组件。
我知道connect执行浅层比较，但不知道如何让它比较object的值。我找不到任何启用了这些选项的连接示例。
我已经看到了和更多，但它也没有帮助。
我试过了
const ConnectList = connect(mapStateToProps,null,null,{areStatesEqual : () => false})(List)
试着让它重新呈现任何变化。这似乎不太管用。
import React, { Component } from 'react
浏览 0提问于2018-07-08得票数 1
我读到Redux Thunk是管理异步操作/请求的可靠方法。没有太多关于通过其他操作来分派操作的内容。
如何调度同步操作？我不确定thunk方法的性能问题，但我可以只在其他动作创建器中分派动作而不定义内部函数吗？
在我看来，使用redux thunk来满足这种需求是不必要的。
浏览 0提问于2016-02-19得票数 27
回答已采纳
我目前的代码有一个问题，所以当我在调试时，我试图理解我应该采取哪种方法来解决这个问题。
我正在使用passport.js的google oauth。从客户端，我有一个获取身份验证的操作。
import axios from "axios";
const axiosInstance = axios.create({
baseURL: "http://localhost:3000/api",
timeout: 3000,
});
export const fetchUser = () => async (dispatch, getState, api
浏览 2提问于2020-06-03得票数 0
这是我的减速机：
export default function(state=[], action){
switch (action.type) {
case FETCH_PLACES:
return [action.payload.data];
}
return state;
}
这是我的飞行集装箱：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import moment fr
浏览 2提问于2018-02-05得票数 0
回答已采纳
2回答
这是redux-thunk库的源代码：
function createThunkMiddleware(extraArgument) {
return ({ dispatch, getState }) => next => action => {
if (typeof action === 'function') {
return action(dispatch, getState, extraArgument);
}
return next(action);
};
}
const thunk = createTh
浏览 3提问于2020-02-09得票数 1
回答已采纳
我在做redux-saga的项目。我以前用过thunk，所以我可以在api请求之后做一些工作，比如，
componentDidMount(){
login().then((success)=>{
redirectToProfilePage();
})
}
因为redux-thunk中的动作会带来希望。但是当我试图在redux-saga中这样做时，我不能使用那么，因为saga不返回承诺。
所以我使用componentWillReceiveProps来解决这个问题，但我认为这不是一个合适的解决方案。
我应该在saga生成器中做这个工作吗？或者还有其他更好的方法吗？
浏览 1提问于2017-11-21得票数 0
在文档中，有一些关于如何通过Redux ( )发出导航事件的信息，但是如何从操作中访问存储？
我的行为触发分派(push(‘/foo’))：
export function fetchReservationData(reservation_code, onError) {
return (dispatch) => {
fetch(apiConfig.find_my_product)
.then(function(response) {
if (response.ok) {
浏览 1提问于2016-09-15得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
