异步操作未运行异步React Redux Thunk
是一个问题描述，它涉及到React、Redux和Thunk等技术。下面是对该问题的完善和全面的答案：
异步操作是指在程序执行过程中，某些任务需要等待一段时间才能得到结果，期间可以继续执行其他任务。在前端开发中，异步操作常用于处理网络请求、数据获取和处理等耗时操作，以避免阻塞用户界面。
React是一个用于构建用户界面的JavaScript库，它采用组件化的开发模式，使得构建复杂的UI界面更加简单和可维护。Redux是一个用于管理应用状态的JavaScript库，它与React结合使用，提供了一种可预测的状态管理方案。
Thunk是Redux中的一个中间件，它允许我们在Redux中处理异步操作。Thunk中间件允许我们在Redux的action中返回一个函数而不是一个普通的action对象。这个函数可以在内部进行异步操作，然后再触发其他的action来更新应用的状态。
在React Redux Thunk中，异步操作未运行可能是由于以下原因之一：
- 异步操作未正确配置：在使用React Redux Thunk时，需要正确配置Redux Store以支持中间件。确保在创建Store时使用
applyMiddleware函数将Thunk中间件添加到中间件链中。 - 异步操作未正确触发：在Redux中，异步操作需要通过触发相应的action来启动。确保在组件中正确地调用异步操作的触发函数，以便启动异步操作。
- 异步操作存在错误：在异步操作的实现中可能存在错误，例如网络请求失败、数据处理错误等。可以通过查看浏览器控制台或使用调试工具来定位和解决这些错误。
针对这个问题，可以采取以下步骤来解决：
- 确认Redux Store已正确配置，并且Thunk中间件已添加到中间件链中。
- 检查组件中触发异步操作的代码，确保正确调用了相应的触发函数。
- 使用浏览器控制台或调试工具来检查异步操作的执行过程，查看是否存在错误信息。
- 根据具体的错误信息进行排查和修复。可能需要检查网络请求是否正确、数据处理逻辑是否正确等。
如果需要在腾讯云上进行云计算相关的开发和部署，以下是一些推荐的腾讯云产品和产品介绍链接地址：
- 云服务器（CVM）：提供弹性的虚拟服务器，适用于各种应用场景。产品介绍链接
- 云数据库MySQL版（CDB）：提供高性能、可扩展的MySQL数据库服务。产品介绍链接
- 云存储（COS）：提供安全可靠的对象存储服务，适用于存储和管理各种类型的数据。产品介绍链接
- 人工智能平台（AI）：提供丰富的人工智能服务，包括图像识别、语音识别、自然语言处理等。产品介绍链接
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行评估和决策。
相关·内容
我正在尝试让我的应用程序不会抱怨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
回答已采纳
这是我的商店，实现了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
回答已采纳
我在React的类组件中使用axios来调用api。并使用Redux存储大部分登录详细信息。
所以开始学习Redux-thunk，现在我搞不懂在哪里调用API？从视图端执行api调用不好吗？我需要用redux-thunk吗？
浏览 4提问于2020-08-25得票数 0
回答已采纳
2回答
我刚开始研究反应Js和Redux。目前，我正在尝试使用redux-thunk从url中获取数据。我成功地获得了数据，但问题是它两次呈现undefined数据，然后在道具中给出所需的数据。这是我的密码。
在行动中index.js
function getData() {
return {
type: 'FETCH'
}
}
function getSuccess(data) {
return {
type: 'FETCH_SUCCESS',
payload: data
}
}
function getFailed(err) {
浏览 0提问于2018-08-19得票数 1
回答已采纳
2回答
我正在尝试找出为什么我无法从redux-thunk接收到本应传递的dispatch()函数。我尝试了几个不同的编码教程，但似乎都不适合我，但我确实注意到有几种不同类型的实现。
所以我的问题很简单，为redux-thunk编写异步函数以确保调度被调用的整体正确方法是什么？
注意:我可以调用操作创建者，但错误: 1)调度不是操作2)操作需要是纯对象
我对我所要求的是redux异步操作的理解。
const getAttributes= () => {
return (dispatch) => {
return (/* Some async stuff */);
}
}
浏览 0提问于2018-04-30得票数 0
Redux-thunk允许您创建返回函数而不是操作的操作创建器。内部函数接收存储方法dispatch和getState作为参数。
function incrementAsync() {
return (dispatch, getState) => {
setTimeout(() => {
dispatch(increment());
}, 1000);
};
}
但与此同时，react-redux的connect已经有了一个mapDispatchToProps参数，可用于将操作创建器包装到调度调用中，以便可以直接调用它们。使用mapDispat
浏览 0提问于2017-06-12得票数 4
1回答
在调度后获取更新的redux状态
、、、、
这是我的reducer.js
const initialState = {
counter: 0
}
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'increase':
state = { ...state, counter: state.counter + 1 }
break
default:
break
}
retur
浏览 3提问于2021-10-25得票数 1
我试图利用thunk对api进行异步调用，但我仍然得到错误:未处理的运行时错误:操作必须是普通对象。使用自定义中间件进行异步操作。
这是我的自定义_app组件：
// to connect redux with react
import { Provider } from 'react-redux';
import { createWrapper } from 'next-redux-wrapper';
import { createStore, applyMiddleware } from 'redux';
import reduc
浏览 2提问于2020-08-10得票数 1
请您更详细地说明以下问题?？1-react redux已经提供了连接(mapStateToProps，mapDispatchToProps)，那么为什么要使用中间件和redux-thunk呢？
了解这个连接函数就足以从存储中获取状态，并从组件中分派事件？
浏览 0提问于2018-05-04得票数 2
回答已采纳
2回答
我想弄清楚，Redux和Axios是如何一起工作的，但我只是碰壁了，我需要一些帮助.我的问题是，在操作中有一个调度，但是在我返回调度后，它不再继续。这很可能是我不明白这是如何工作，所以请尽量解释在尽可能多的细节。提前谢谢。
我的combineReducer
import {combineReducers} from "redux";
import getAvailableDatesReducer from "./getAvailableDatesReducer";
export default combineReducers({
availableD
浏览 6提问于2021-04-27得票数 0
--我需要并行调用两个apis -。这一点很重要，因为我希望将page to load的时间保持在最低限度。
如果我在componentDidMount中调用这两个apis (如下面所示)，那么它是否是异步的。
class Test extends Component{
constructor(args) {
super(args)
this.state = {
...
};
...
}
componentDidMoun
浏览 1提问于2018-07-09得票数 0
回答已采纳
3回答
作为一个初级的react开发人员，我正在学习redux-thunk中间件，我不明白为什么dos函数(由redux-thunk返回)返回一个promise (由fetch()返回)
我试着不返回任何东西，它起作用了，那么为什么我们要返回它呢？
export function getCourses() {
return fetch(baseUrl)
.then(handleResponse)
.catch(handleError);
}
export function loadCourses() {
return function(dispatch) {
disp
浏览 2提问于2019-08-25得票数 0
我正在尝试制作一个博客风格的应用程序。我正在运行一个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
回答已采纳
1回答
我正在学习Redux，在尝试使用redux时遇到了一个问题。我使用Redux作为Chrome扩展，我正在使用构建。下面是我目前的设置：
Index.js:
import {applyMiddleware,createStore} from 'redux';
import combineReducers from './reducers/index';
import {wrapStore} from 'react-chrome-redux';
import thunk from 'redux-thunk';
const middl
浏览 0提问于2017-10-11得票数 0
1回答
我通过异步等待使用API调用，这需要定制中间件，我使用Thunk作为自定义中间件。所有依赖项都已安装。而且，不知怎么的，它无法检测到中间件或类似的东西。
我的代码在执行时显示了以下错误：
这是我的操作页面:我使用了异步等待，这导致了这个错误。
import axios from "axios";
export const saveTwitterToken = (token) => {
return ({
type: TWITTER_OAUTH,
payload: token
});
};
export const callTwitterA
浏览 0提问于2019-05-19得票数 0
1回答
我已经为这个问题挣扎了好几个星期了。我终于认输了，并在这件事上寻求帮助，因为我显然做得不对。我有一个React.js应用程序，它使用redux和redux-thunk。我只是试图让我的组件容器启动数据的加载，而不是在数据从提取请求返回之前进行呈现。看起来很简单我知道。以下是我所做的：
容器组件
'use strict';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchActivePlayer } from
浏览 2提问于2016-06-27得票数 4
我读过关于这个错误的多个来源，但我不知道我在这里做的不对。我已经使用了自定义中间件，并且我相信我返回的操作是正确的。有什么建议吗？
app.js
import React from "react";
import ReactDOM from "react-dom";
import { renderToString } from "react-dom/server";
import { Provider } from "react-redux";
import { createStore, applyMiddleware, com
浏览 1提问于2018-06-17得票数 0
回答已采纳
当我使用类型记录创建我的react项目时，我引入了Redux错误报告，这表明我找不到它，但是我必须安装所有的依赖项。
，这是我的package.json
{
"name": "react-test",
"version": "0.1.0",
"private": true,
"dependencies": {
"@types/jest": "^24.0.11",
"@types/node": "^11.11.3&
浏览 0提问于2019-03-16得票数 20
回答已采纳
我有一个使用react-router 4和redux 5的react项目，如果我发出一个简单的axios请求，我可以接收数据，但当我试图将它传递给reducer时，我得到了reducer回调，但没有来自操作的数据，也看不到它在我的存储中。因此，我正在尝试弄清楚如何接收回这些数据。在控制台日志中，我从reducer返回了2条消息。第一个是@@redux/INIT，第二个是：@@redux/PROBE_UNKNOWN_ACTION_1.d.5.t.z.5
index.js：
import React from 'react';
import ReactDOM from '
浏览 1提问于2017-03-31得票数 0
2回答
我是新来的反应和补救，试图派遣状态从商店，但无法这样做，请任何人帮助我解决问题.
App.js
import React from "react";
import store from './reduxStore/store';
import { Provider } from 'react-redux';
import Sidebar from './Sidebar';
function App() {
return (
<div>
<Provider store={store}&
浏览 6提问于2021-01-23得票数 1
回答已采纳
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
回答已采纳
2回答
使用redux作为通量模式构建React应用程序。
要使用api，需要发出令牌交换请求。这只能在React应用程序启动时发生一次。令牌交换返回的access_token需要存储在redux状态下，供其他接口调用访问。
我尝试过的一种方法是在App(父)组件中调用redux操作，然后所有其他调用都在子组件中。React新手我现在明白了这不是正确的方法，因为React组件生命周期事件和调用的actions和reducers不遵循同步流，因此redux操作被称为异步。
如何确保在依赖于第一个redux操作的结果的任何其他redux操作之前调用redux操作？哪种中间件最适合确保同步方法redux-t
浏览 0提问于2016-05-11得票数 1
我正在使用原始的创建-反应-应用程序来构建，没有弹出。但是我发现构建结果非常大，它是2MB，它正常吗？我删除了'window.REDUX_DEVTOOLS_EXTENSION_COMPOSE'，，实际上，我根本没有使用它。
import { createStore, compose, applyMiddleware } from 'redux'
import reducer from './reducer'
import thunk from 'redux-thunk'
// const composeEnhancers = w
浏览 2提问于2020-04-30得票数 1
回答已采纳
在我的应用程序中：
"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
回答已采纳
我有这些文件，当我发送一些东西时，它总是返回还原器的默认情况。
这是我第一次使用redux/thunk，我遵循本教程：，当他这样做时，它会工作。
请看一下我的代码：
反应成分：
import React, { Component } from 'react';
import './App.css';
import Request from 'request';
import { connect } from 'react-redux'
import * as OperationsActions from './actio
浏览 0提问于2017-08-17得票数 3
回答已采纳
我在几个React/Redux项目中工作过，经常有一些组件需要以某种方式使用从服务器端传来的数据进行初始化，因此需要通过某种异步调用。对于这个开放式的问题，很抱歉，但是这样一个函数的理想触发点是什么？我有时使用componentDidMount并触发Redux action来填充初始数据存储(action将触发redux-thunk异步调用，等等)，但是有更好的方法吗？
浏览 0提问于2017-12-21得票数 0
在我的学习react，redux项目中，我尝试使用axom处理ajax数据，但我不知道如何在组件中分派操作和设置状态
在组件中将挂载
componentWillMount(){
this.props.actions.addPerson();
}
商店
import { createStore, applyMiddleware } from "redux";
import rootReducer from "../reducers";
import thunk from "redux-thunk";
export default functi
浏览 23提问于2017-08-23得票数 1
回答已采纳
1回答
我来自一个Angular2世界，那里有一些服务可以进行正常的数据加载等等，现在我正在使用React，Redux应用程序，并试图找出与Redux中的Angular2服务等价的东西( are )。是Redux-thunk吗？
浏览 2提问于2017-02-28得票数 1
使用效果钩子用于执行诸如react中的网络请求之类的副作用。
redux-thunk中间件也用于执行诸如react中的网络请求之类的副作用。
我很困惑，它们的实际应用是否有什么不同，还是只是一个选择的问题。
浏览 6提问于2021-10-21得票数 1
我用的是redux和redux，还有打字稿。我试图通过connect()向组件注入一个简单的thunk动作创建者，使用mapDispatchToProps。
Actions
export enum TestActionTypes {
THUNK_ACTION = "THUNK_ACTION"
}
export interface ThunkAction {
type: TestActionTypes.THUNK_ACTION;
}
export type TestAction = ThunkAction;
动作创建者
export function thunkAct
浏览 0提问于2018-05-11得票数 13
回答已采纳
使用react-redux而不使用saga或thunk中间件是一种最佳实践吗？
我有一个react-redux应用程序，但它没有任何这些中间件。这是我现在拥有的代码。
import React from 'react';
import ReactDOM from 'react-dom';
import allReducers from './app/reducers/index';
import Header from './app/components/header';
import './index.css'
浏览 1提问于2018-01-09得票数 0
Types.js文件：
const ADD_TOKENS = "ADD_TOKENS";
export { ADD_TOKENS};
Actions.js文件：
import { ADD_TOKENS } from "./types";
function addTokens() {
return {
type: ADD_TOKENS,
};
}
const actionCreators = {
addTokens,
};
export { actionCreators };
Reducers.js文件
import { ADD_TOK
浏览 0提问于2020-05-31得票数 0
如何从react-redux中的Promise对象中获取普通的JSON对象？
我的action.js包含：
export function allEmp() {
let url = "employees?access_token=";
let result = ApiCall.getApiCall(url)
.then(function (response) {
return response;
})
.catch(function (error) {
return erro
浏览 0提问于2018-01-09得票数 1
1回答
当使用“react路由器-redux”时，如何获得当前位置？
这是routing状态：
{
routing: {
locationBeforeTransition: {
pathname: "/foo",
search: "",
hash: "",
state: null,
action: "PUSH",
key: "e8jfk"
}
浏览 1提问于2016-08-19得票数 5
回答已采纳
1回答
我在测试一些依赖于异步thunk的代码时遇到了一些问题。 这是我的想法： export const signup = createAsyncThunk(
"auth/signup",
async (payload, { dispatch }) => {
try {
const response = await axios.post(
"https://localhost:5000/auth/signup",
payload
);
const cookies = new
浏览 48提问于2021-05-04得票数 0
mern堆栈，使用一个我称为Landing的类组件，我使用componentDidMount方法。在表单提交时，axios使用get方法返回我的user对象。然后，我使用一个导出到我的商店的函数来处理我的用户对象。收到此错误:操作必须是纯对象。相反，实际的类型是：'Promise‘。您可能需要在您的存储设置中添加中间件来处理分派其他值，例如'redux-thunk‘来处理分派功能。我通过执行connect并传递我导出的操作，然后执行Landing来导出默认的Landing组件。index.js文件当前正在使用redux-thunk中间件。 我的目标是更新user的状态，以便所
浏览 21提问于2021-09-09得票数 0
回答已采纳
大家好，我在使用react(准确地说是redux)时遇到了一个问题。当我刷新页面redux store时，一切都恢复到了初始值，我用谷歌搜索了一下这个问题，发现我必须使用redux-persist。然而，即使这样也不起作用，我认为问题出在我配置redux-persist的方式上，但我可能是错的。下面的代码是我如何进行redux-persist配置的。 // configureStore.js
import { createStore, applyMiddleware } from "redux";
import { persistStore, persistReducer
浏览 17提问于2021-03-28得票数 1
1回答
如何从文件中加载数据？
、、、、
我正在尝试使用redux-thunk从文件中加载数据，请告诉我如何调用load函数，我想从文件中获取数据，这里是我的代码。
const thunk = ReduxThunk.default;
const abc= (state={},action) => {
console.log('in redux', action.type)
switch(action.type){
case 'GET_DATA':
return action
default :
return state;
}
}
const
浏览 5提问于2016-12-28得票数 0
回答已采纳
1回答
user.js import React, { useEffect } from 'react';
import { fetchBlog } from '../../redux';
import { connect } from 'react-redux'
const Home = ({ blogData, fetchBlog }) => {
const { id } = useParams();
useEffect(() => {
fetchBlog();
}, []);
return (
<>
浏览 8提问于2020-09-13得票数 0
1回答
我的React/Redux应用程序中有一个中间件，如下所示：
export const myMiddleware = (store) => (next) => async (action) => {
switch (action.type) {
case types.SOME_ACTION:
// Some logic here...
break;
}
}
我需要在这里访问状态，以便执行这个中间件设计用来处理的逻辑。
我想，因为存储被传递到中间件中，所以我可以访问它，但是当我检查存储时，我根本看不到状态。我确实看到了一个get
浏览 1提问于2018-07-17得票数 5
回答已采纳
2回答
我是新来的反应。
我正在尝试显示一个组件。
但现在我收到了一个错误
所以我调试并评论了这个应用程序。
但我仍然面临着一个错误。
你能告诉我怎么修理吗?这样以后我就自己修。
提供下面的代码片段和堆栈below代码。
import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Loadin
浏览 1提问于2018-12-24得票数 1
回答已采纳
1回答
完全工作代码框示例
我声明了一个简单的操作类型和一个异步的thunk来分发它：
type ActionType = { type: "foo"; v: number };
const FooThunk: ThunkAction<Promise<ActionType>, any, any, ActionType> = (dispatch): Promise<ActionType>
=> {
return new Promise<number>((resolve) => {
setTimeout(() =&
浏览 5提问于2020-10-26得票数 1
回答已采纳
Redux Thunk和Redux Saga都是Redux的中间件。两者之间的区别是什么，以及如何确定何时使用Redux Thunk或Redux Saga？
浏览 1提问于2018-05-11得票数 26
当我尝试使用我的async操作时，如何在操作中使用async？：
export async function bookmarkVideo(video) {
const bookmarkedArray = (await AsyncStorage.getItem("bookmarked")) || [];
if (bookmarkedArray === undefined || bookmarkedArray.length == 0) {
bookmarkedArray.push(video);
return dispatch =&
浏览 0提问于2019-06-07得票数 2
回答已采纳
1回答
检查是否用酶调用了redux作用
、、、、
我正在尝试测试我的React中是否已经从componentDidMount调用了一个分派。我的问题是，我不知道如何检查是否调用了autoLogin()。
test.js
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
const mockStore = configureMockStore([thunk]);
it('should be called once', () => {
const wrapper =
浏览 0提问于2018-04-19得票数 0
回答已采纳
完整的错误消息：
不变违规:无法在“连接(组合)”的上下文或道具中找到“存储”。或者将根组件包装在一个，或者显式地传递"store“作为"Connect(Portfolio)”的支柱。
不知道为什么在我的Jest测试中会出现这个错误，因为我的应用程序正在工作，我可以通过调度操作来改变我的状态。
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { createStore, applyMiddleware, compose } from &#
浏览 3提问于2017-06-28得票数 9
回答已采纳
? 当我安装redux-thunk时，它显示了一个错误，你可以查看附加的图片以了解更多信息- npm错误！错误：'C:\Users\siddharth.vyas\Desktop\react-native_Proj\AwesomeProject\node_modules\redux-thunk‘：不允许操作，请重命名'C:\Users\siddharth.vyas\Desktop\react-native_Proj\AwesomeProject\node_modules.staging\redux-thunk-069b38d0’-> EPERM 我也试着用管理员安装&
浏览 14提问于2019-07-02得票数 0
对于我们的ReactNative应用程序，我们将通过使用内部存储来减少加载时间。最初，redux存储中的数据使得立即呈现成为可能，而api调用是为了更新数据。调用api之后，使用store.dispatch存储最新的数据。
在安卓和模拟器上一切运行良好，但在iPhone X上，当store.dispatch被调用时，应用程序就会冻结。删除调度“解决了”这个问题。
问题是什么？我们应该试试另一个存储引擎吗？
编辑:我根据我们的编码：创建了一个基本的redux应用程序。使用博览客户端，这在iPhone上工作得很好。所以不可能重现这个问题..。
我们的store.js文件：
import {crea
浏览 1提问于2021-01-16得票数 2
我使用create-react-app和react-redux创建了一个react应用程序。在单击一个按钮时，我使用mapDispatchToProps发出一个操作，它返回一个有效负载。但是，当我试图在组件中使用mapStateToProps检索道具时，它会返回初始状态。
我做错了什么？
我已经尝试过彻底地调试，并且我意识到该操作是被分派的，而有效负载使其成为操作创建者。但减速机不会在行动完成后触发。
这可能是我叫它的方式，也可能是我如何设置我的减速机。
index.js文件：
import React from 'react';
import './css/index
浏览 1提问于2019-07-01得票数 0
我正在尝试使用React在应用程序中测试一些异步代码。
const configureMockStore = require('redux-mock-store').default;
const thunk = require("redux-thunk").default;
const middlewares = [thunk];
const mockStore = configureMockStore(middlewares);
const dummy = () => {
// Mock Ajax call
return new Promis
浏览 1提问于2019-04-22得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
