首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何从redux工具包异步thunk的挂起状态修改另一个片的状态

从redux工具包异步thunk的挂起状态修改另一个片的状态,可以通过以下步骤实现:

  1. 首先,确保你已经安装了redux和redux-thunk这两个包,并在你的应用中进行了配置。
  2. 在你的redux store中,定义一个action creator来处理异步操作。这个action creator应该返回一个函数,而不是一个普通的action对象。这个函数将会被redux-thunk中间件拦截并执行。
  3. 在这个函数中,你可以进行异步操作,比如发送网络请求或者执行其他耗时的操作。一旦异步操作完成,你可以调用dispatch函数来分发一个普通的action对象,用于更新另一个片的状态。
  4. 在另一个片的reducer中,根据接收到的action类型来更新状态。你可以使用switch语句来处理不同的action类型,并返回更新后的状态。

下面是一个示例代码:

首先,在你的redux store中配置redux-thunk中间件:

代码语言:txt
复制
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

然后,在你的action creator中进行异步操作,并在异步操作完成后分发一个普通的action对象:

代码语言:txt
复制
import axios from 'axios';

export const fetchData = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_DATA_START' });

    try {
      const response = await axios.get('https://api.example.com/data');
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: response.data });
    } catch (error) {
      dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
    }
  };
};

接着,在另一个片的reducer中根据接收到的action类型来更新状态:

代码语言:txt
复制
const initialState = {
  data: null,
  loading: false,
  error: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_START':
      return { ...state, loading: true };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_DATA_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

export default reducer;

这样,当你调用fetchData action creator时,它会触发异步操作并更新另一个片的状态。你可以根据具体的业务需求来修改和扩展这个示例代码。

关于腾讯云相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,建议你参考腾讯云官方文档或者咨询腾讯云的技术支持团队,以获取与你的需求匹配的产品和服务信息。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Redux开发实用教程

如果一个 model 变化会引起另一个 model 变化,那么当 view 变化时,就可能引起对应 model 以及另一个 model 变化,依次地,可能会引起另一个 view 变化。...state 方法就是触发 action,action 是一个用于描述已发生事件普通对象; 使用纯函数来执行修改:为了描述 action 如何改变 state tree ,你需要编写 reducers...为了使用异步action我们需要引入redux-thunk库,redux-thunk是为Redux提供异步action支持中间件。...thunk ] //添加异步中间件redux-thunk let createAppStore = applyMiddleware(...middlewares)(createStore) 创建异步action...像 redux-thunkredux-promise 这样支持异步 middleware 都包装了 store dispatch() 方法,以此来让你 dispatch 一些除了 action

1.4K20

单向数据流-共享状态管理:fluxreduxvuex漫谈异步数据处理

比如一个组件需要使用另一个组件状态,或者一个组件需要改变另一个组件状态,都是共享状态。...redux Redux使用一个对象存储整个应用状态(global state),当global state发生变化时,状态树形结构最顶端往下传递。每一级都会去进行状态比较,从而达到更新。...比如 redux-thunkredux-promise,分别是使用异步回调和 Promise 来解决异步 action 问题。...redux-saga优势 Redux 处理异步中间件 redux-thunkredux-promise,当然 redux 异步中间件还有很多,他们可以处理大部分场景,这些中间件思想基本上都是把异步请求部分放在了.../article/details/80755667 转载本站文章《单向数据流-共享状态管理:flux/redux/vuex漫谈异步数据处理》, 请注明出处:https://www.zhoulujun.cn

3.6K40

听说redux很简单

Redux 是 JavaScript 应用状态容器,提供可预测状态管理。 可以帮助你开发出行为稳定可预测、运行于不同环境(客户端、服务器、原生应用)、易于测试应用程序。...工作流程 什么情况下需要使用 redux 总体原则: 能不用就不用, 如果不用比较吃力才考虑使用 某个组件状态,需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件状态...中间件(插件库) 编码: import {createStore, applyMiddleware} from 'redux' import thunk from 'redux-thunk' /.../ redux 异步中间件 const store = createStore( counter, applyMiddleware(thunk) // 应用上异步中间件 combineReducers...返回一个新状态 b. 不要修改原来状态 store 将 state,action 与 reducer 联系在一起对象 如何得到此对象?

19350

前端高频react面试题

如何解决 props 层级过深问题使用Context API:提供一种组件之间状态共享,而不必通过显式组件树逐层传递props;使用Redux状态库。React Hook 使用限制有哪些?...redux异步流中间件其实有很多,当下主流异步中间件有两种redux-thunkredux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-observable额外范式,上⼿简单redux-thunk缺陷:样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量代码,⽽且很多都是重复性质耦合严重: 异步操作与redux...一旦有了这个DOM树,为了弄清DOM是如何响应新状态而改变, React会将这个新树与上一个虚拟DOM树比较。

3.3K20

React:Redux怎么处理异步

)来触发状态变化: store.dispatch(action); // 分发Action dispatch(action)则通过reducer完成状态修改: currentState = currentReducer...异步逻辑应放置在 Redux中间件中处理 !! Middleware !! (就是下面要提到redux-thunkredux-promise) ?...dispatch 一个 thunk函数; redux-thunk 中间件允许你 dispatch 一个函数(即:thunk),异步逻辑就放在这个函数中处理; 感受一波redux-thunk精炼 ?...总结: redux-thunk 允许我们 dispatch 一个包含异步处理逻辑函数(thunk);优点是我们可以借助这种简单机制在 redux 中处理异步逻辑;缺点是这会让 action 变不纯粹...异步业务逻辑被集中在 Saga 中管理; c. 没有修改 action 原本含义; d.

2.6K30

美团前端react面试题汇总

但是在⼀定规模项⽬中,上述⽅法很难进⾏异步管理,通常情况下我们会借助redux异步中间件进⾏异步处理。...redux异步流中间件其实有很多,当下主流异步中间件有两种redux-thunkredux-saga。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-observable额外范式,上⼿简单redux-thunk缺陷:样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量代码,⽽且很多都是重复性质耦合严重: 异步操作与redux...state,相反他们只能表达想要修改意图使用纯函数来执行修改state为了描述action如何改变state tree 需要编写reduceReact 数据持久化有什么实践吗?

5.1K30

Redux原理分析以及使用详解(TS && JS)

用户使用方式非常简单 用户之间没有协作 不需要与服务器大量交互,也没有使用 WebSocket 视图层(View)只单一来源获取数据 组件角度看,如果你应用有以下场景,可以考虑使用 Redux。...某个组件状态,需要共享 某个状态需要在任何地方都可以拿到 一个组件需要改变全局状态 一个组件需要改变另一个组件状态 1.2、为什么要用Redux 在React中,数据在组件中是单向流动,这是react...从简单 react-thunkredux-promise 再到 redux-saga等等,都代表这各自解决redux异步流管理问题方案 4.1 、redux-thunk redux-thunk...尽管redux-thunk很简单,而且也很实用,但人总是有追求,都追求着使用更加优雅方法来实现redux异步控制,这就有了redux- promise。...同步异步角度来说这个问题:想让异步变成类似同步操作我们应该怎么办,大家想到肯定是async/await,阻塞代码,我开始一直陷入一个误区,我内部的确造成了阻塞,等到data有值了,才会dispatch

3.9K30

学习react-redux,看这篇文章就够啦!

# reducer 编写规则 只根据 state 和 action 参数计算新状态值 不允许修改现有的 state 值,必须通过复制现有的值 不能做任何异步操作逻辑、以及副作用【可以通过插件接触此问题...一些常见副作用是: 将值记录到控制台 保存文件 设置异步计时器 发出 AJAX HTTP 请求 修改存在于函数之外某些状态,或改变函数参数 生成随机数或唯一随机 ID(例如 Math.random...包含 actions 对象函数,不可是异步函数。但可以借助 thunk 中间件能力,在 action 函数内部执行异步操作。...thunk from "redux-thunk"; // 执行异步操作插件 import table from "....2、vuex 只适用于 vue 框架之中 # 设计上 1、redux redux 中不可以直接修改原始 state 数据,需要拷贝原数据进行修改 不可执行异步操作,但可以通过中间件处理异步操作 2、vuex

23520

一文梭穿Vuex、Flux、ReduxRedux-saga、Dva、MobX

比如一个组件需要使用另一个组件状态,或者一个组件需要改变另一个组件状态,都是共享状态。...显然,用 Redux 处理异步,可以自己写中间件来处理,当然大多数人会选择一些现成支持异步处理中间件。比如 redux-thunkredux-promise 。...Redux将React组件分为容器型组件和展示型组件,容器型组件一般通过connect函数生成,它订阅了全局状态变化,通过mapStateToProps函数,可以对全局状态进行过滤,而展示型组件不直接...把UI组件事件映射到 dispatch 方法 Redux-saga 刚才介绍了两个Redux 处理异步中间件 redux-thunkredux-promise,当然 redux 异步中间件还有很多...对比 Redux-thunk 比较一下 redux-thunkredux-saga 代码: 和 redux-thunk 等其他异步中间件对比来说,redux-saga 主要有下面几个特点:

5.4K10

react知识总结_六年级教学工作总结个人

大家好,又见面了,我是你们朋友全栈君。 简介 这次要总结是对 store 和 reducer 拓展,比如发送异步 action 操作,还有一个就是对多个 reducer 管理。...) store 可以接受三个参数,第一个参数是 reducer ,第二个参数代表状态默认值,用于覆盖 reducer 默认状态。...action 信息: redux-thunk import thunk from 'redux-thunk'; import { createLogger } from 'redux-logger...', payload: user }) } 使用 redux-thunk 让 dispatch 接受一个函数,让他能够进行异步操作: addUserData: (user) => {...这种异步思路就是使用 Action Creator 返回一个函数,然后使用 redux-thunk 让 dispatch 能够接受一个函数作为参数。

64820

《彻底掌握redux》之开发一个任务管理平台

你将收获 redux工作机制和基本概念 redux使用模式 redux相关生态使用(react-redux, keymirror, reduce-reducers) 异步action解决方案redux-thunk...异步action解决方案redux-thunk 在了解异步action之前我想先来聊聊redux中间件机制。...接下来我们看看异步action。使用异步action基本模式如下: 我们在异步开始时,成功时,失败时都会派发一个action,来通知用户操作状态。...异步action本质上是返回一个函数,在函数里面执行相关操作,但是普通action返回是一个对象,那么如何去处理呢?...下面教大家如何使用redux-thunk: import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk

1K30

第二十篇: Redux 中间件实现原理切入,理解“面向切面编程”

中间件工作模式 中间件引入,会为 Redux 工作流带来什么样改变呢?这里我们以 redux-thunk 为例,经典异步 Action”场景切入,一起看看中间件是如何帮我们解决问题。...经典异步 Action 解决方案redux-thunk 在针对 Redux 源码主流程分析中,我们不难看出这样一个规律:Redux 源码中只有同步操作,也就是说当我们 dispatch action...支持异步数据流 Redux 中间件有很多,其中最适合用来快速上手应该就是 redux-thunk了。...而 thunk 中间件似乎巧妙地“绕开”了这层校验,这背后到底藏着什么玄机呢? 要想搞清楚这个问题,你除了需要理解 thunk 执行逻辑,更重要是要知道 Redux 中间件是如何工作。...总结 在这一讲,我们首先以 redux-thunk 中间件为例,异步工作流”场景切入,认识了 Redux 中间件工作模式。

30530

2021高频前端面试题汇总之React篇

但是在⼀定规模项⽬中,上述⽅法很难进⾏异步管理,通常情况下我们会借助redux异步中间件进⾏异步处理。...redux异步流中间件其实有很多,当下主流异步中间件有两种redux-thunkredux-saga。...(1)使用react-thunk中间件 redux-thunk优点: 体积⼩: redux-thunk实现⽅式很简单,只有不到20⾏代码 使⽤简单: redux-thunk没有引⼊像redux-saga...或者redux-observable额外范式,上⼿简单 redux-thunk缺陷: 样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量代码,⽽且很多都是重复性质 耦合严重: 异步操作与redux...但是Redux状态更改可回溯——Time travel,数据多了时候可以很清晰知道改动在哪里发生,完整提供了一套状态管理模式。

2K00

深入理解 redux 数据流和异步过程管理

一般来说,除了某部分状态数据是只有某个组件关心,我们会把状态数据放在组件内以外,业务数据、多个组件关心状态数据都会放在 store 里面。...组件 store 中取数据,当交互时候去通知 store 改变对应数据。...redux saga 设计成 generator 形式是一种学习成本和可测试性权衡。 还记得 redux-thunk 有啥问题么?多个异步过程之间并行、串行复杂关系没法处理。...这些控制多个异步过程之间关系 effect 正是 redux-thunk 所没有的,也是复杂异步过程管理必不可少部分。...redux-thunk 并没有提供多个异步过程管理机制,复杂异步过程管理还是得用 redux-saga 或者 redux-observable。

2.4K10
领券