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

如何键入Redux thunk操作创建者以返回承诺

Redux Thunk是一个Redux中间件,用于处理异步操作。它允许我们在Redux应用中编写具有副作用的操作,例如异步API调用或延迟的操作。

要创建一个Redux Thunk操作创建者并返回Promise,可以按照以下步骤进行:

  1. 首先,确保你的项目中已经安装了redux-thunk依赖包。可以使用以下命令进行安装:
代码语言:txt
复制
npm install redux-thunk
  1. 在Redux应用的store配置中,将redux-thunk中间件应用于store。例如:
代码语言:txt
复制
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));
  1. 创建一个Redux Thunk操作创建者函数。这个函数将返回一个函数,而不是一个普通的action对象。这个函数可以在内部执行异步操作,并在操作完成后分发相应的action。例如:
代码语言:txt
复制
import axios from 'axios';

export const fetchUser = () => {
  return (dispatch) => {
    dispatch({ type: 'FETCH_USER_REQUEST' });

    axios.get('/api/user')
      .then((response) => {
        dispatch({ type: 'FETCH_USER_SUCCESS', payload: response.data });
      })
      .catch((error) => {
        dispatch({ type: 'FETCH_USER_FAILURE', payload: error.message });
      });
  };
};

在上面的例子中,fetchUser函数返回一个函数,这个函数接收dispatch作为参数。在函数内部,我们首先分发一个FETCH_USER_REQUEST的action,表示正在获取用户数据。然后,我们使用axios库执行异步的GET请求,并根据请求结果分发相应的action。

  1. 在组件中使用Redux Thunk操作创建者。可以通过将操作创建者导入并将其作为props传递给组件,然后在组件中调用它来触发异步操作。例如:
代码语言:txt
复制
import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchUser } from './actions';

const UserComponent = ({ user, fetchUser }) => {
  useEffect(() => {
    fetchUser();
  }, []);

  return (
    <div>
      {user.loading ? (
        <p>Loading...</p>
      ) : user.error ? (
        <p>{user.error}</p>
      ) : (
        <p>{user.data.name}</p>
      )}
    </div>
  );
};

const mapStateToProps = (state) => {
  return {
    user: state.user,
  };
};

export default connect(mapStateToProps, { fetchUser })(UserComponent);

在上面的例子中,我们使用useEffect钩子在组件加载时调用fetchUser操作创建者。根据Redux store中的user状态,我们渲染不同的内容。

这是一个基本的示例,展示了如何使用Redux Thunk创建异步操作并返回Promise。根据具体的业务需求,你可以根据需要进行修改和扩展。

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

相关·内容

Redux Toolkit

Toolkit 包括以下 API: configureStore(): 包装createStore提供简化的配置选项和良好的默认值。...它可以自动组合你的 slice reducer,添加你提供的任何 Redux 中间件,redux-thunk默认包含,并启用 Redux DevTools Extension。...reducer: { counter: counterReducer, }, }); createReducer():这使您可以为 case reducer 函数提供操作类型的查找表,而不是编写...state.value += action.payload }) }) createSlice():接受reducer函数的对象、切片名称和初始状态值,并自动生成切片reducer,并带有相应的动作创建者和动作类型...createAsyncThunk: 接受一个动作类型字符串和一个返回承诺的函数,并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk import { createAsyncThunk

12410

react基础--2

2.容器组件是真正和redux打交道的,里面可以随意使用redux的api 3.UI组件中不能使用任何redux api 4.容器组件会传给UI组件:1.redux中保存的状态,2.用于操作状态的方法...5.备注:容器给UI传递:状态、操作状态的方法,均通过props传递 基本使用 1.确保ui组件已经创建 2.创建ui组件的容器组件,用于将ui组件与redux进行连接 在容器组件键入 /container...需要给connect函数传递两个参数 第一个参数是给ui组件的状态,第二个参数是给ui组件的操作状态的方法 但这两个参数必须是函数,通过函数的返回值给到ui组件 如下 // 引入 ui 组件 import.../components/Count' // 引入connect用于连接ui组件与redux import { connect } from 'react-redux' // 该函数返回的对象中的key.../reducers/person' // 引入 redux-thunk 用于支持异步的action import thunk from 'redux-thunk' const allReducers

1.2K20
  • JavaScript 中的函数式编程:纯函数与副作用

    如何管理副作用隔离副作用:将副作用集中在特定的模块或函数中,以便更好地控制和管理它们。采用函数式副作用处理库:例如 redux-saga 或 redux-thunk 用于处理异步操作等副作用。...withLogging(add);loggedAdd(2, 3);// 输出:// Function called with arguments: [2, 3]// Function returned: 5使用 redux-thunk...FETCH_DATA_SUCCESS': return { ...state, data: action.payload }; default: return state; }};在 redux-thunk...这个函数可以接收 dispatch 方法作为参数,允许你在函数内部执行异步操作。在上面的例子中,fetchData 是一个 thunk 函数,它使用 setTimeout 来模拟异步数据请求。...使用 redux-saga 管理副作用Action Creator(动作创建者)// actions.jsconst fetchDataSaga = () => ({ type: 'FETCH_DATA_SAGA

    14900

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

    中间件的工作模式 中间件的引入,会为 Redux 工作流带来什么样的改变呢?这里我们 redux-thunk 为例,从经典的“异步 Action”场景切入,一起看看中间件是如何帮我们解决问题的。...经典的异步 Action 解决方案redux-thunk 在针对 Redux 源码主流程的分析中,我们不难看出这样一个规律:Redux 源码中只有同步操作,也就是说当我们 dispatch action...redux-thunk 带来的改变非常好理解,它允许我们函数的形式派发一个 action,像这样(解析在注释里): // axios 是一个用于发起异步请求的库 import axios from '...而 thunk 中间件似乎巧妙地“绕开”了这层校验,这背后到底藏着什么玄机呢? 要想搞清楚这个问题,你除了需要理解 thunk 的执行逻辑,更重要的是要知道 Redux 中间件是如何工作的。...若 action 是一个函数,那么 redux-thunk 就会执行它并且返回执行结果;若 action 不是一个函数,那么它就不是 redux-thunk 的处理目标,直接调用 next,告诉 Redux

    40330

    redux-thunk引发的redux middleware和store enhancer浅析

    本文作者:IMWeb EnjoyChan 原文出处:IMWeb社区 未经同意,禁止转载 项目中使用redux-thunk来解决异步请求的问题,但是为什么要引入redux-thunk来解决异步请求问题...,不借助redux-thunk就无法解决吗?...setTimeout dispatch场景为例,在异步执行时dispatch action就可以实现了 // 1 store.dispatch({ type: 'BEFORE_ASYNC'...,只需要关注传入的参数; 观察ecncapsulateFunc,我们会发现它返回了一个函数,参数传入dispatch,我们称ecncapsulateFunc为thunk函数,关于thunk不了解的可以戳链接...http://www.ruanyifeng.com/blog/2015/05/thunk.html; 对比上述,使用redux-thunk可以帮助我们代码更优雅,封装设计更合理,当然redux-thunk

    1.1K20

    深入学习 Redux 之中间件与异步操作

    同步操作只要发出一种 Action 即可,异步操作的差别是它要发出三种 Action: 操作发起时的 Action 操作成功时的 Action 操作失败时的 Action 向服务器取出数据为例,三种..."操作结束" 状态,View 再一次重新渲染 五、redux-thunk 中间件 ---- 异步操作至少要送出两个 Action:用户触发第一个 Action,这个跟同步操作一样,没有问题;如何才能在操作结束时...这时,就要使用中间件 redux-thunk。...因此,异步操作的第一种解决方案就是,写出一个返回函数的 Action Creator,然后使用 redux-thunk 中间件改造 store.dispatch。...另一种异步操作的解决方案,就是让 Action Creator 返回一个 Promise 对象。 这就需要使用 redux-promise 中间件。

    1.1K20

    应用connected-react-router和redux-thunk打通react路由孤立

    对于 Redux 应该如何、何时使用的更多建议,请看:“您可能不需要ReduxRedux之道,第1部分-实现和意图 Redux之道,第2部分-实践与哲学 Redux 常见问题 Redux 的创造者...创建 Store redux 通过createStore创建一个 Redux store 来存放应用中所有的 state,createStore的参数形式如下: createStore(reducer...fetchPosts 代码如下: 操作结束后,再发出一个 Action,触发 State 更新为“操作结束”,View 再次重新渲染redux-thunk异步操作至少送出两个 Action,第一个 Action...跟同步操作一样,直接送出即可,那么如何送出第二个 Action 呢?...,该函数执行时dispatch一个 action,表明马上要进行异步操作;异步执行完成后,根据请求结果的不同,分别dispatch不同的 action 将异步操作的结果返回回来。

    2.4K00

    一天梳理完react面试高频题

    这种机制可以让我们改变数据流,实现如异步action ,action 过滤,日志输出,异常报告等功能redux-logger:提供日志输出redux-thunk:处理异步操作redux-promise:...处理异步操作,actionCreator的返回值是promise如何配置 React-Router 实现路由切换(1)使用 组件路由匹配是通过比较 的 path 属性和当前地址的...在传统页面的开发模式中,每次需要更新页面时,都要手动操作 DOM 来进行更新。 DOM 操作非常昂贵。在前端开发中,性能消耗最大的就是 DOM 操作,而且这部分代码会让整体项目的代码变得难 维护。...(1)使用react-thunk中间件redux-thunk优点:体积⼩: redux-thunk的实现⽅式很简单,只有不到20⾏代码使⽤简单: redux-thunk没有引⼊像redux-saga或者...redux-observable额外的范式,上⼿简单redux-thunk缺陷:样板代码过多: 与redux本身⼀样,通常⼀个请求需要⼤量的代码,⽽且很多都是重复性质的耦合严重: 异步操作redux

    4.1K20

    React saga_react获取子组件ref

    如何处理副作用操作,在redux中选择在发出action,到reducer处理函数之间使用中间件处理副作用。...action不易维护的原因: action的形式不统一 就是异步操作太为分散,分散在了各个action中 2.redux-saga写一个hellosaga 跟redux-thunk,redux-saga...(plain object) 对比redux-thunk我们发现,redux-saga中监听到了原始js对象action,并不会马上执行副作用操作,会先通过Effect方法将其转化成一个描述对象,然后再将描述对象...一旦监听到login动作,返回的action为: { type:'login' } call(apply) call和apply方法与js中的call和apply相似,我们call方法为例: call...4.redux-saga实现一个登陆和列表样例 接着我们来实现一个redux-saga样例,存在一个登陆页,登陆成功后,显示列表页,并且,在列表页,可 点击登出,返回到登陆页。

    4.5K30

    Redux异步解决方案之Redux-Thunk原理及源码解析

    但是我们的应用里面经常会有定时器,网络请求等等异步操作,使用Redux-Thunk就可以发出异步的action: function increment() { return { type:...store.dispatch({ type: 'HIDE_NOTIFICATION' }) }, 5000) (译注:这段代码的功能是显示一个通知,5秒后自动消失,也就是我们经常使用的toast效果,原作者一直这个为例...不关心这里的返回值,没返回值也没关系 if (!...你可能会发现很多例子都返回了Promise,这个不是必须的,但是用起来却很方便。Redux并不关心你的thunk返回了什么值,但是他会将这个值通过外层的dispatch()返回给你。...thunk 根据我们前面讲的,thunk是一个函数,接收dispatch getState两个参数,所以我们应该将thunk拿出来运行,然后给他传入这两个参数,再将它的返回值直接返回就行。

    3.6K51

    深度剖析github上15.1k Star项目:redux-thunk

    接下来笔者将从: Redux的工作机制 中间件实现原理 redux-thunk源码实现 这三个方面来带大家彻底掌握redux-thunk源码,从而对redux有更深入的了解和应用。...如果大家对react-redux-redux-thunk实战感兴趣的,读完之后可以移步笔者的《彻底掌握redux》之开发一个任务管理平台 正文 在解读Redux-thunk源码之前我们需要先掌握redux...到这一步我们仍然不能直接进入redux-thunk的源码分析,因为我们还是不清楚如何解决上述步骤,因为我们还没有了解redux的中间件机制。...实现中间件的机制也很简单, 就是在框架核心执行流中去遍历外部传入的中间件,并依次执行即可,我们先来看看redux如何使用中间件的: import { createStore, applyMiddleware...在掌握了redux中间件实现原理之后, 我们再来看redux-thunk源码就非常容易理解了。

    75320
    领券