redux-thunk调度不起作用
redux-thunk是一个用于处理Redux异步操作的中间件。它允许我们在Redux应用中编写具有副作用的操作，例如异步API调用或延迟的操作。
redux-thunk的作用是将action创建函数扩展为可以返回函数的形式，而不仅仅是普通的action对象。这样我们就可以在action创建函数中进行异步操作，例如发起网络请求，然后在请求完成后再dispatch一个普通的action。
使用redux-thunk的优势在于它的简单易用和灵活性。它可以与任何Redux应用程序一起使用，并且不需要对现有的action和reducer进行修改。同时，它还提供了一种清晰的方式来处理异步操作，使代码更易于理解和维护。
redux-thunk的应用场景包括但不限于：
- 异步API调用：当需要从服务器获取数据或向服务器发送数据时，可以使用redux-thunk来处理异步操作。
- 延迟的操作：例如在用户输入时进行实时搜索，可以使用redux-thunk来处理延迟的操作。
腾讯云提供了一些相关产品和服务，可以帮助开发者在云计算环境中使用redux-thunk：
- 云函数（Serverless Cloud Function）：腾讯云云函数是一种无服务器计算服务，可以让开发者无需搭建和管理服务器，直接编写和部署函数代码。可以使用云函数来处理redux-thunk中的异步操作。 产品链接：https://cloud.tencent.com/product/scf
- 云数据库（TencentDB）：腾讯云云数据库是一种高性能、可扩展的云端数据库服务，支持多种数据库引擎。可以使用云数据库来存储和管理redux-thunk中的数据。 产品链接：https://cloud.tencent.com/product/cdb
- 云监控（Cloud Monitor）：腾讯云云监控是一种全方位的云服务监控和管理工具，可以帮助开发者实时监控和管理redux-thunk中的应用程序。 产品链接：https://cloud.tencent.com/product/cvm
请注意，以上仅为腾讯云提供的一些相关产品和服务，其他云计算品牌商也提供类似的产品和服务，可以根据实际需求选择合适的解决方案。
相关·内容
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
Redux-thunk允许您创建返回函数而不是操作的操作创建器。内部函数接收存储方法dispatch和getState作为参数。
function incrementAsync() {
return (dispatch, getState) => {
setTimeout(() => {
dispatch(increment());
}, 1000);
};
}
但与此同时，react-redux的connect已经有了一个mapDispatchToProps参数，可用于将操作创建器包装到调度调用中，以便可以直接调用它们。使用mapDispat
浏览 0提问于2017-06-12得票数 4
handleDeleteClick = propertyName => () => {
this.props.clearFilterOption(propertyName, this.props.filtersPropertyName);
this.props.onFilterClear();
}; handleDeleteClick函数是一个按钮处理程序。我的第一个redux操作clearFilterOption修改了存储。第二个动作onFilterClear是从redux-thunk的getState映射过滤器参数并调用api的异步动作。我的问题是- redux th
浏览 7提问于2019-05-29得票数 1
回答已采纳
我有以下redux-thunk操作：
import { Action } from "redux";
import { ThunkAction as ReduxThunkAction } from "redux-thunk";
import { IState } from "./store";
type TThunkAction = ReduxThunkAction<void, IState, unknown, Action<string>>;
export type TReturnValue = { someStri
浏览 0提问于2021-02-07得票数 5
我在我的项目中使用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-saga生成器
export function* toggleMenu(payload) {
let transitionDuration;
let { status } = payload;
if (!status) {
transitionDuration = 500;
yield put({ type:types.TOGGLE_MENU, status: 'transitioning' });
} else {
transitionDuration = 0;
}
yield delay(transitionDuration);
浏览 2提问于2016-12-14得票数 0
1回答
有没有办法使用redux-thunk中间件监听组件中的某些操作？或者我真的需要使用redux-saga或redux-observable来实现这一点？
这是我的redux-thunk异步操作，我只是想在TICKET_CREATE_SUCCESS操作分派后关闭对话框
export const createTicketEffects = (ticket: Ticket): ThunkAction<void, RootState, unknown, Action<string>> => {
return async (dispatch: ThunkDispatc
浏览 1提问于2021-03-06得票数 0
1回答
我想我在这里缺少一个基本的理解。我知道，为了创建一个操作，从而启动事件的redux链，必须使用dispatch调用操作创建者。
但是，当我们有一个redux-thunk返回一个函数，该函数将在我们的操作创建者上调用dispatch时，为什么还必须用dispatch调用redux-thunk？
例如，以下面的redux-thunk为例：
function savePerson(person: Person) {
return async (dispatch: any) => {
delete person.cars;
let newPerson =
浏览 6提问于2017-05-08得票数 2
回答已采纳
3回答
我相对较新的版本。我已经读了很多文章，但我还没有弄清楚使用redux-thunk的真正好处是什么。
我所理解的就是它允许您从action-creators返回一个函数而不是对象？但好处是什么？我创建了很少的小反应项目，而不使用redux-thunk。
让我们考虑下面的片段。两人的行为都是一样的。
如果有人能解释我，或者给我指点正确的资源来获得更好的理解，那将是很有帮助的。
With redux-thunk
export function fetchContacts(){
return function(dispatch){
axios
.get('/cont
浏览 3提问于2018-01-22得票数 3
回答已采纳
2回答
我想在没有组件的情况下进行调度。我写了这段代码： const handleClient = () => (dispatch) => {
try {
dispatch({
type: "SET_CLIENT",
user: {
id: 1,
name: "client",
},
});
} catch (err) {
console.log(err);
}
};
export default handleLogin; 但是这个代码不起作用。我导入这
浏览 28提问于2021-11-05得票数 0
1回答
没有redux- thunk，你的动作创建者仍然可以将调度作为参数，似乎可以做任何thunk会做的事情：
那么redux-thunk的动机到底是什么呢？
浏览 0提问于2018-04-08得票数 0
我正在尝试传递一些来自redux-thunk的对redux-saga的调用。我得到了一些错误，我对saga是个新手，所以这里的代码示例来自saga和下面的两个函数，如果有人能帮助我，这将是一个很大的帮助。
var LOAD_TRANSLATIONS = exports.LOAD_TRANSLATIONS = 'loadTranslation';
// redux-thunk
var loadTranslations = exports.loadTranslations = function loadTranslations(translations) {
return f
浏览 20提问于2017-01-13得票数 0
2回答
我在使用redux-thunk时遇到了以下错误。我被困了几天，我在堆叠溢出中找到了很多关于这个问题的答案，但它们都没有帮助。抱歉，这也许是个愚蠢的问题。任何帮助都将不胜感激。非常感谢
我面临的错误：未明错误:操作必须是普通的对象。使用自定义中间件进行异步操作.
Store.js：
import { createStore, applyMiddleware } from 'redux'
import ReduxThunk from 'redux-thunk'
import reducer from './reducers'
const store
浏览 0提问于2018-07-15得票数 0
我正在使用React、Redux、Redux-Thunk和Typescript(noobie)。当我使用thunk调用一个操作时，我可以看到调用了该操作(使用console.log)，但没有调用分派。我使用mapToDispatch连接了这个操作，并使用this.props.( action )从组件中调用它。我搞不懂为什么调度没有被调用。下面是我的代码：
store.ts
import { applyMiddleware, combineReducers, createStore, Store, compose } from 'redux'
import { ReducerM
浏览 21提问于2019-11-22得票数 0
1回答
所以我现在是redux的新手，并且还停留在中间件部分。我需要知道这两个代码是如何相互作用的。
我的动作创建者：
import jsonPlaceHolder from '../APis/jsonPlaceHolder';
export const fetchPosts= ()=>{
return async (dispatch)=>{
const response = await jsonPlaceHolder.get('/posts');
dispatch({type:'FETCH_POSTS',
浏览 0提问于2020-01-27得票数 1
我遇到了一个问题，在这个问题中，action没有将数据传递给reducer。我通过改变任何东西来使用热重新加载来重新渲染。它正在接收数据并再次尝试重新加载所有应用程序。同样的问题。
Reducer文件
const initialState = {
categories: null,
error: '',
isLoading: false,
};
const CategoriesReducer = (state = initialState, action) => {
console.log(state.categories);
switch (act
浏览 17提问于2021-09-21得票数 0
请您更详细地说明以下问题?？1-react redux已经提供了连接(mapStateToProps，mapDispatchToProps)，那么为什么要使用中间件和redux-thunk呢？
了解这个连接函数就足以从存储中获取状态，并从组件中分派事件？
浏览 0提问于2018-05-04得票数 2
回答已采纳
假设我有这样的代码：
import { Action, Dispatch } from 'redux';
import { ThunkAction } from 'redux-thunk';
interface StateTree {
field: string;
}
function myFunc(action: Action | ThunkAction<void, StateTree, void>,
dispatch: Dispatch<StateTree>) {
dispatch(acti
浏览 2提问于2017-03-25得票数 19
回答已采纳
我试图通过以下命令将多个调度操作链接到另一个：
1.updateCart(调度、cartProducts、loggedUser) --带有redux-thunk。
在完成获取数据后，im按顺序发送操作：
2.调度(logoutReset())
3.派遣(logoutSuccess())
4.然后进行刷新--window.location.reload()
但不要等到调度完成后才会继续前进，所以它会一直搞砸。我尝试过许多方法，等待或承诺，但没有成功。
我想向你们学习如何做好这件事。
组件Navbar
const handleLogout = async() => {
t
浏览 4提问于2022-02-10得票数 0
--我需要并行调用两个apis -。这一点很重要，因为我希望将page to load的时间保持在最低限度。
如果我在componentDidMount中调用这两个apis (如下面所示)，那么它是否是异步的。
class Test extends Component{
constructor(args) {
super(args)
this.state = {
...
};
...
}
componentDidMoun
浏览 1提问于2018-07-09得票数 0
回答已采纳
如何在不从初始调用传递操作的情况下从操作内部调度操作？我只想删除props.dispatch，但是我不能让它工作。我已经在使用redux-thunk了，而且我还是个新手。我的版本是有效的，但我想它不是最好的。 <Files
onDrop={file => {
props.dispatch(addFile(props.dispatch, {id: uuidv4(), file}));
}}
/> actions.js： // addFile
export function addFile(
dispatch,
{
浏览 6提问于2020-01-12得票数 0
回答已采纳
1回答
我刚开始学习mind类型，我需要一些帮助来理解我头脑中不清楚的两件事。
以为例，我想知道在没有类型定义的情况下，对类型的控制是如何工作的，在本例中是：？
如果我使用redux定义，当我尝试绑定异步操作创建者时，bindActionCreators的验证就会失败(我正在使用redux-thunk)。
在使用redux-thunk时，如何继续使用流和绑定异步操作创建者？
代码示例()：
import { bindActionCreators } from 'redux';
import type { Dispatch } from 'redux';
浏览 5提问于2016-11-15得票数 10
我有一个项目，在这个项目中，我将redux-thunk中间件应用到了我的redux存储中。现在我的代码中有几个块，这也是分派的，但是它们返回ThunkAction<Promise<void>, void, void, AnyAction>，所以我假设它们是异步的。
在代码的其他地方，我直接调用存储上的调度方法。作为应用中间件的效果，这些操作是否也是异步的，还是保持同步？
例如，如果我这样做：
store.dispatch(someAction);
那还是同步的吗？
提前谢谢。
浏览 2提问于2019-10-07得票数 0
回答已采纳
1回答
在redux-saga中，我们可以像reducers一样运行saga。dispatch({type: 'SAGA_GET_POSTS', payload: 'all'})和所有与传奇相关的帖子都有posts.sagas.js。
我们能用redux-thunk做同样的事情吗？这样我们就不需要在组件中分派操作之前导入它们了？
浏览 0提问于2021-06-02得票数 0
4回答
我试图通过redux-thunk操作来查询我的Firebase后端，但是，当我在使用useEffect()的初始渲染中这样做时，我最终得到了这个错误： Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops. 我的操作只是返
浏览 79提问于2020-03-19得票数 8
1回答
我目前正在做的是：
export type Action =
{ type: 'FOO' }
| { type: 'BAR' }
export type Thunk = (dispatch: Dispatch, getState: GetState) => Action | Thunk
export type Dispatch = ReduxDispatch<Action> & (action: Thunk) => void
但是，如果不重新创建store，就不能直接在store上进行调度
export type S
浏览 2提问于2017-01-22得票数 7
回答已采纳
到目前为止，我已经完成了两个React/Redux项目，第一个使用了我们自己的中间件，最近一个使用了redux-thunk。在第一个过程中，我们使用“常规”操作对象作为异步操作，中间件对此进行了解释。在这种情况下，可以理解的是，我们的操作出现在react本机调试器的操作列表中。
然而，在最近的项目中，我注意到我们的块在调试器中没有显示为操作，这引发了以下问题：
1)这是否正常? 2)如果是，人们是否认为这不是一个问题? 3)其他异步操作库是否也有相同的问题？
浏览 0提问于2018-09-25得票数 1
回答已采纳
1回答
我有以下异步操作定义：
import {Dispatch} from 'react';
import axios, {AxiosResponse, AxiosError} from 'axios';
function asyncAction() {
return (dispatch: Dispatch<any>): Promise<number> => {
return axios.get('http://www.example.com')
.then( (res:
浏览 4提问于2020-10-25得票数 1
回答已采纳
我正在尝试从redux中的api调用中获取一些数据：
import {createStore,combineReducers,compose,applyMiddleware} from "redux"
import math from "./reducers/mathReducer"
import user from "./reducers/userReducer"
import thunk from "redux-thunk"
const store = createStore(
combineReducers
浏览 0提问于2017-05-20得票数 1
1回答
我怎么才能摆脱这么多的调度？
、、、、
在我的mapDispatchToProps中，我调用draw，当按下十字或零时，它会在我的正方形上绘制。现在代码看起来像这样：
const mapStateToProps = ({board, players}) => ({board, players});
const mapDispatchToProps = dispatch => ({
draw: (board, players, squareIndex) => {
if (!board[squareIndex]) {
if (players[players.turn]
浏览 6提问于2021-09-22得票数 1
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
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回答
所以我有一个依赖redux-thunk和express后端的应用程序。同时获取数据和发出post请求是不是很好的做法？ 下面是一个代码示例： export const getProducts = () => async (dispatch) => {
const { data } = await API.getProducts();
dispatch({ type: 'GET_PRODUCTS', payload: data });
};
export const createProduct = (proData) => async (dispat
浏览 29提问于2021-06-23得票数 2
回答已采纳
我是redux初学者。我使用redux-thunk，然而，我只从这个函数中得到错误。
Error: Actions must be plain objects. Use custom middleware for async actions.
this.props.sendPaypalOrderToFirebase(body)
export const sendPaypalOrderToFirebase = (orderInfo) => {
async (dispatch, getState) => {
database.ref('paypalOrder
浏览 0提问于2017-11-25得票数 0
1回答
我有以下动作创建者：
export const doSomething () {
return (dispatch, getState) => {
setTimeout(function () {
dispatch(someAction('bbb'));
}, 3000);
}
}
它将状态的某些部分更改为bbb，其中状态是从组合的reducers创建的。我如何测试它呢？
import configureMockStore from 'redux-mock-store'
import thunk from 're
浏览 1提问于2016-12-31得票数 0
1回答
我正在使用typings和一个新的React项目。我已经将各种库类型定义从--global安装为dt，如下所示：
typings install dt~redux --global --save
我正在使用IntelliJ的想法，并且我注意到，当它建议导入某些东西时，它会在一堆以~开头的模块中找到它。这是什么？
例如，如果我请求Redux 上的导入建议，就会得到以下方面的建议：
~redux-thunk~redux/redux
~react-router-redux~redux/redux
~react-redux~redux/redux
~redux/redux
它们生成如下的导入语句：
i
浏览 3提问于2016-07-21得票数 1
回答已采纳
尝试使用组件的<button>中的props来调度已为异步进程设置的redux-thunk函数，但我不太清楚如何同时使用props和函数(通过mapDispatchToProps中的react-redux connect连接到组件)，但我就是想不出如何同时调用props和函数。
function loadData(dispatch, medium) {
console.log(dispatch)
return dispatch({type: 'LOADING_COMPONENT'})
return axios.get(`/professiona
浏览 1提问于2017-12-06得票数 0
1回答
因此，我正在开发一个React，在我的应用程序的商店中，我坚持使用ratedPosts来保存用户评级帖子的信息。
(获取此信息的其他方法是迭代每个帖子的分级用户列表，因为这样会消耗更多的性能，我想出了这个解决方案)
redux商店
然而，我刚刚注意到，在我以不同用户的身份登录到我的应用程序之后，持久化数据仍然加载，这通常是我应该期望的。是否有办法为不同用户更改持久化数据？就像我以user1身份登录后一样，这个数据加载，对于user2，ratedPosts是空的。
store.js
import { createStore, applyMiddleware } from 're
浏览 0提问于2020-11-09得票数 0
据我所知，可以是
<button onClick={fn1}>Click Me</button>
在fn1中，它不分派操作对象，而是分派函数fn2，以便当redux-thunk中间件调用它(意为fn2)时，调用fetch或Ajax调用，并让then实现处理程序或Ajax回调分派一个操作对象，例如
{ type: "DATA_RECEIVED", data: data }
但是为什么fn1不直接调用fn2来执行任务，而让中间件调用它呢？
浏览 1提问于2020-02-27得票数 1
回答已采纳
我使用的是redux-thunk，我还想发送一些带有超时的操作。由于一些原因(我想要一个对象中的所有超时，我希望能够取消它们，现在并不重要)，我希望有自定义的‘超时中间件’和‘动作增强程序’。
施法者只会发出特殊类型的行动：
const addTimeoutToAction = (delay, action) => ({
type: 'TIMEOUT'
, delay
, action
})
中间件只会捕捉到它，并且应该在超时结束后执行分派操作。
({dispatch, getState}) => next => action => {
浏览 4提问于2016-10-13得票数 0
回答已采纳
1回答
为什么调度操作重写我的存储值？
、、、、
我使用redux钩子从功能组件向redux商店发送了两次。
当我像这样单独发送这些文件时，其中只有一个存储在我的redux存储中，因为每次都会刷新，并且只保存一个。我如何将它们一起发送，或者如何防止redux存储刷新和丢失第一个分派有效负载？？。
dispatch({
type: "access_token",
payload: googleUser.accessToken,
});
dispatch({
type: "firebase_u
浏览 1提问于2021-11-12得票数 0
回答已采纳
2回答
我的存储包含一个数组，当用户单击一个按钮时，我将向该数组添加新项。这些项目的内容取决于商店其他地方设置的标志。
例如，如果用户先前启用了“设置X"，则新的数组项应该包含{ type: 'x'}，而不是默认的{type: 'y'}。
我了解如何分配一个操作来执行添加新数组项的操作，但我无法解决如何组合状态的其他部分的操作。
我的问题：
我真的需要在这里使用redux-thunk吗？我找不到任何答案，所以答案最终不会落在它身上。
我是新的反应，并想了解为什么这不可能是默认的。这是因为状态可能会在用户单击按钮和发送操作之间发生某种变化吗？
有更明显
浏览 0提问于2017-04-19得票数 0
我在两个不同的动作中有两种方法
import { fetchCategories } from "../../../actions/elementsActions"
import { fetchPlaces } from "../../../actions/placesActions"
componentWillMount方法是：
componentWillMount() {
this.props.dispatch(fetchCategories())
this.props.dispatch(fetchPlaces())
}
我想确保fetchC
浏览 2提问于2017-01-03得票数 2
回答已采纳
在我的Register.tsx文件中，我有以下代码：
<View style={styles.keyboardView}>
<Formik
initialValues={{
firstname: '',
lastname: '',
email: '',
password: '',
}}
onSubmit={values => {
浏览 0提问于2021-10-29得票数 0
1回答
我正在尝试测试登录用户操作，但我总是得到store.getActions()的空数组。如何测试登录用户函数，如果成功则获取操作类型SET_USER，否则获取操作类型错误。下面是我的身份验证操作代码
export const loginUser = (user) => dispatch => {
axios
.post('http://localhost:5000/users/login', user)
.then(res => {
dispatch({
type: 'SET_USER',
浏览 13提问于2018-08-10得票数 0
我正在做一个SPA使用反应。我想要在页面刷新后的状态，所以我使用‘redux-持久化’。我不知道我的导入'allReducers‘是否错误，因为我收到的消息是TypeError: baseReducer不是函数
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App.jsx';
import * as serviceWorker from '
浏览 1提问于2020-03-18得票数 3
6回答
如何向Redux添加多个中间件？
、、、、
我已经插入了一个中间件，redux-thunk，我想添加另一个中间件，redux-logger。
我如何配置它，使我的应用程序使用这两块中间件？我试着传递一个[ReduxThunk, logger]数组，但这不起作用。
代码：
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
浏览 10提问于2017-05-13得票数 77
回答已采纳
1回答
我有一个Redux actions和reducers的React Native应用程序。我使用redux-thunk调度来等待asyncron调用。我的应用程序中有一个操作：
export const getObjects = (id, page) => {
return (dispatch) => {
axios.get(`URL`)
.then(response => {
dispatch({ type: OBJECTS, payload: response });
}
浏览 4提问于2017-05-15得票数 5
1回答
我正在尝试理解处理fetch HTTP请求的正确方式，并确保收到所请求的数据。
我的观点是，我的请求可能会出错，所需的数据对我的应用程序至关重要。在这种情况下，更合适的处理方式是什么呢？只是创建一个新的请求吗？
我如何将该解决方案与redux和redux-thunk相结合
谢谢
浏览 1提问于2017-01-10得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
