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

何时为redux thunk额外的reducers更新状态或返回action.payload?

在使用Redux Thunk时,额外的reducers更新状态或返回action.payload的时机取决于具体的业务需求和数据流程。Redux Thunk是一个中间件,允许我们在Redux中编写异步的action creator。当我们需要进行异步操作或处理副作用时,可以使用Redux Thunk来处理。

在Redux Thunk中,我们可以定义一个异步的action creator,它可以返回一个函数而不是一个普通的action对象。这个函数可以在内部进行异步操作,例如发送网络请求、获取数据等。当异步操作完成后,我们可以通过dispatch来派发一个普通的action对象,更新Redux的状态。

对于额外的reducers更新状态或返回action.payload的时机,可以根据具体的业务需求来决定。以下是一些常见的情况:

  1. 异步请求成功后更新状态:当异步请求成功后,可以在异步action creator的回调函数中使用dispatch来派发一个普通的action对象,将获取到的数据作为payload传递给reducers,从而更新状态。例如:
代码语言:txt
复制
export const fetchData = () => {
  return (dispatch) => {
    // 发送异步请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 异步请求成功后派发普通的action对象
        dispatch({ type: 'FETCH_SUCCESS', payload: data });
      });
  };
};
  1. 异步请求失败后更新状态:类似于异步请求成功后的处理,可以在异步action creator的回调函数中使用dispatch来派发一个普通的action对象,将错误信息作为payload传递给reducers,从而更新状态。例如:
代码语言:txt
复制
export const fetchData = () => {
  return (dispatch) => {
    // 发送异步请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 异步请求成功后派发普通的action对象
        dispatch({ type: 'FETCH_SUCCESS', payload: data });
      })
      .catch(error => {
        // 异步请求失败后派发普通的action对象
        dispatch({ type: 'FETCH_FAILURE', payload: error.message });
      });
  };
};
  1. 根据异步请求结果进行条件判断:有时候我们需要根据异步请求的结果来进行条件判断,然后更新状态或返回不同的action对象。可以在异步action creator的回调函数中根据具体的条件来使用dispatch派发不同的action对象。例如:
代码语言:txt
复制
export const fetchData = () => {
  return (dispatch) => {
    // 发送异步请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        if (data.status === 'success') {
          // 根据条件派发不同的action对象
          dispatch({ type: 'FETCH_SUCCESS', payload: data });
        } else {
          dispatch({ type: 'FETCH_FAILURE', payload: data.error });
        }
      })
      .catch(error => {
        dispatch({ type: 'FETCH_FAILURE', payload: error.message });
      });
  };
};

需要注意的是,Redux Thunk允许我们在异步action creator中进行复杂的业务逻辑处理,但为了保持代码的可维护性和可测试性,建议将异步操作和业务逻辑分离,将异步操作封装成独立的函数或工具类,并在异步action creator中调用这些函数或工具类来处理异步操作。

对于推荐的腾讯云相关产品和产品介绍链接地址,可以根据具体的业务需求和技术选型来选择适合的产品。腾讯云提供了丰富的云计算服务,包括云服务器、云数据库、云存储、人工智能等。可以通过访问腾讯云官网(https://cloud.tencent.com/)来了解更多关于腾讯云的产品和服务。

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

相关·内容

Redux 入门到高级教程

Redux 是 JavaScript 状态容器,提供可预测化状态管理。 (如果你需要一个 WordPress 框架,请查看 Redux Framework。)...在React项目中使用redux 安装: npm install --save redux yarn add redux 基本概念 Redux设计理念:Web 应用是一个状态机,视图与状态是一一对应...显然,只要把 View 更新函数(对于 React 项目,就是组件render方法setState方法)放入listen,就会实现 View 自动渲染。...中间件返回处理 import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import...实际项目中,你应该权衡一下,是直接使用 Redux,还是使用 React-Redux。后者虽然提供了便利,但是需要掌握额外 API,并且要遵守它组件拆分规范。

2.7K30
  • 精读《重新思考 Redux

    dva 之后,有许多基于 redux 状态管理框架,但大部分都很局限,甚至是倒退。但直到看到了 rematch,总算觉得 redux 社区又进了一步。...2 概述 比较新颖是,作者给出一个公式,评价一个框架工具质量: 工具质量 = 工具节省时间/使用工具消耗时间 如果这样评估原生 redux,我们会发现,使用 redux 需要额外花费时间可能超过了其节省下来时间...简化初始化 redux 初始化代码涉及概念比较多,比如 compose thunk 等等,同时将 reducer、initialState、middlewares 这三个重要概念拆分成了函数方式调用,...,因为 reducers 是分散,如果在 reducers 中赋值,要利用 es 默认参数特性,看起来更像业务思考,而不是 redux 提供能力。...值,再加上 store name 前缀保证唯一性即可。

    45220

    React全家桶之Redux使用

    和vuex区别: 没有getters和actions,仅仅关注状态变更。更加纯粹(dispatch),vuex包括dispatch和commit。 而且reduxdispatch是同步操作。...惟一改变 state 办法是触发 action,一个描述发生什么对象。 为了描述 action 如何改变 state 树,你需要编写 reducers。...创建一个 store.js store同时必须对应一个 reducer函数:他接收两个参数,分别是当前 state 树和要处理 action,返回 state 树。...改变 state 惟一方法是 dispatch action。你也可以 subscribe 监听 state 变化,然后更新 UI。 // 可以手动订阅更新,也可以事件绑定到视图层。...但经过中间件(强化器)处理后,可以做异步操作,或者打日志 安装redux-thunkredux-logger: npm i redux-thunk redux-logger-S 应用中间件,store.js

    1.3K20

    我是这样在 React 中实践 TDD 编程

    该文件将包含以下方法和变量: mockNetWorkResponse:在默认实例上创建mock适配器,并模拟到所需端点任何GETPOST请求; getCreateUserResponse:返回/user.../上POST请求响应; getUserListResponse: 返回对/user/GET请求响应。...thunk是一个函数,它以storedispatch方法作为参数,然后在API副作用完成后使用它来dispatch同步操作。 首先,让我们这个特性编写测试。...这将有助于我们比较下一个状态。 dispatch一个action,并确保它已完成,并比较预期状态和实际状态。 同样,测试将失败。让我们创建用户特性添加thunk和reducer。...我们刚刚使用Reduxthunk和axios mock编写了一些测试 对你来说有点挑战吗?添加诸如删除用户、修改以及检索用户等功能。 结论 在本文中,我们快速介绍了使用ReduxTDD。

    1.9K30

    Redux Toolkit

    安装 使用 React 和 Redux 启动新应用程序推荐方法是使用官方 Redux+JS 模板Redux+TS 模板来创建 React App,它利用了Redux Toolkit和 React Redux...它可以自动组合你 slice reducer,添加你提供任何 Redux 中间件,redux-thunk默认包含,并启用 Redux DevTools Extension。...此外,它自动使用该immer库让您使用普通可变代码编写更简单不可变更新,例如state.todos[3].completed = true. createAction():给定动作类型字符串生成动作创建函数...}) }) createSlice():接受reducer函数对象、切片名称和初始状态值,并自动生成切片reducer,并带有相应动作创建者和动作类型。...createAsyncThunk: 接受一个动作类型字符串和一个返回承诺函数,并生成一个pending/fulfilled/rejected基于该承诺分派动作类型 thunk import { createAsyncThunk

    12410

    如何在 React 应用中使用 Hooks、Redux 等管理状态

    :const [count, setCount] = useState(0) 在这里,我们状态提供了一个变量名(count)和一个我们将在每次需要更新状态时使用函数名(setCount)。...并且在函数里有一个 switch 语句,该语句将读取动作类型,对状态执行相应动作,并返回更新状态。 通常做法是在 reducer 上使用 switch 语句, 并且使用大写字母来声明动作。...它接收默认状态和一个动作(action)作为参数,然后在它里面有一个 switch 语句来读取 action type,执行相应状态修改,并返回更新状态。...对于 Redux,要解决问题是处理全局状态(指影响整个应用程序其中很大一部分状态)。用 Redux 来处理像我们例子中计数器模态打开和关闭是没有意义。...提到 Redux ThunkRedux Saga Redux thunkRedux Saga 是两个与 Redux 一起使用很流行中间件库; 具体来说,Thunk 和 Saga 都是为了处理副作用异步任务所使用

    8.5K20

    各流派 React 状态管理对比和原理实现

    如果这里返回一个旧对象,想要知道前后两次状态是否更新成本就会很大。因为两次状态都是同一份引用,想要比较属性是否变化,只能通过深比较形式。 但如果对对象进行深比较,性能上消耗太大了。...所以 Redux 每次只会进行一次浅比较,这样就需要我们在修改地方返回一个新对象。 所以 Redux 将这一职责交给了开发者来保障,给开发者带来了额外心智负担。...以 redux-thunk 例子,只需要在创建 store 时候通过 applyMiddleware 来注册中间件就可以了。...import thunk from 'redux-thunk'; const store = createStore(reducers, applyMiddleware(thunk)); 这样就允许我们...正如 Mobx 官方介绍一样,computed 是基于现有状态计算值衍生出值,如下面 todoList 例子,一旦已完成事项数量改变,那么 completedCount 会自动更新

    2.9K61

    Redux状态管理,真的很简单🦆!

    集中管理: 集中管理应用状态和逻辑可以让你开发出强大功能,如 撤销/重做、 状态持久化 等等。 可调试: Redux DevTools 让你 轻松追踪 到 应用状态何时、何处以及如何改变。...Redux 期望所有状态更新都是使用不可变方式,因此,每一次 state 变更,不会修改原对象,而是修改前一个状态(state)克隆对象,以此来保证不可变性和正确性,同时记录每一次变化 state...框架桥接层 @reduxjs/toolkit: 降低 Redux 使用难度助手 2.3 全局 Store 创建 所有的状态都放在了 Store 中,因此需要一个统一地方来管理,以一个计数器例...incrementByAmount, decrementByAmount } = CounterSlice.actions; // 异步 thunk,用于需要在更新数据前异步处理数据情况 export...TypeScript 类型相关[3] 3.2 Redux 状态变更 如果对 Redux 状态更新过程和原理感兴趣,这里十分推荐阅读: Redux如何实现state变化触发页面渲染?

    3.4K40

    从应用到源码-深入浅出Redux

    需要额外注意是,在 redux 中要求每个 reducer 函数中匹配到对应 action 时需要返回一个全新对象(两个对象拥有完全不同内存空间地址)。...当满足边界条件后,首先会将 isDispatching 重置 true 状态。...但是通常我们并不希望子组件中可以察觉到 Redux 存在,我们更希望子组件中逻辑更加纯粹并不需要通过dispatch Redux store 传给它 。...自然内部只需要遍历 reducers 中每一个 reducer 并且传入对应 state 获得它返回更新对应 rootState 即可。 这里需要额外注意是上边我们强调所谓流通。...上边我们按照步骤实现了一个简单 Redux-Thunk 中间件,它支持我们传入 action 类型一个函数。此时我们就可以在 Redux 中完美的使用异步 Action 。

    1.3K10

    React结合Redux实现Todolist

    /Reducers/TodoList'; /** * 第一个参数是reducers 第二个参数是默认状态 * 所以还得建立reducers reducers主要是负责将新状态返回到store...== action.payload }) }; } // 返回状态 return state; }; const.../store'; /** * 如果单独使用redux的话 直接安装redux包 进行简单状态管理 * 使用store提供subscribe订阅状态更新 状态更新后使用更新组件 */ class...使用了redux进行状态管理 删除一个用户首先dispatch了一个deleteTodoList action  然后在reducer中返回删除后数据 store更新数据 组件订阅了store更新后...更新了内部状态 页面更新成功 代码解析: 创建Store createStore(Reducers) 利用Reducers创建一个Store 第二个参数是默认初始化参数 利 合并多个Reducers

    51220

    redux 文档到底说了什么(下)

    : {}} 结构 使用 redux-thunk 来做异步,手动返回函数 手动使用表驱动来替换 reducer switch-case 模式 手动将 selector 进行封装成函数 手动引入 immer...异步 之前我们用 redux-thunk 都是 action creator 返回函数方式来写代码,redux-toolkit 提供一个 createAsyncThunk 直接可以创建 thunk(其实就是返回函数...都会返回一个新数组,如果有组件依赖 filteredTodos,则那个小组件也会被更新。 说白了,todos.filter(...)...市面上还有很多诸如 redux-action, redux-promise, reduce-reducers等等 redux 衍生品(redux 都快变一个 IP 了)。...这些东西要不就是更好规范 redux 代码,要不就是在dispatch(action) -> UI 更新 这个流程再多加流程,它们最终目的都是为了更自动化地管理状态/数据,相信理解了这个思路再看那些

    78320

    Redux】:Redux 指北

    Redux 是什么? Redux 是JavaScript 应用状态管理容器,提供集中式、可预测状态管理。...: 状态很多、很复杂 一个状态可能要在多个地方使用 多个地方可能会更新同一个状态 多个地方状态展示要能够及时得到同步 状态变动之间存在联动关系(比如:如果要改A,那么B、C、D也得跟着改;如果改B,那么...使用 Redux 是个好选择 但是需要注意,如果用了 Redux,需要把应用所有状态都存进去么? NO....9.3. redux-thunk redux-thunk 中间件扩展了 redux dispatch 功能,它允许你 dispatch 一个函数(即:thunk),异步逻辑就放在这个函数中处理; 源码...Redux Toolkit 是官方提供简化 Redux 开发而退出工具箱。

    1.6K40

    Redux进阶(像VUEX一样使用Redux) 前言redux问题方案目标如何实现思考

    更好阅度体验 前言 redux问题 方案目标 如何实现 思考 前言 Redux是一个非常实用状态管理库,对于大多数使用React库开发者来说,Redux都是会接触到。...在使用Redux享受其带来便利同时, 我们也深受其问题困扰。 redux问题 之前在另外一篇文章Redux基础中,就有提到以下这些问题 纯净。Redux只支持同步,让状态可预测,方便测试。...但不处理异步、副作用情况,而把这个丢给了其他中间件,诸如redux-thunk\redux-promise\redux-saga等等,选择多也容易造成混乱~ 啰嗦。...: 'common', // 初始化state state: { loading: false, }, // reducers 同步更新 类似于vuexmutations...: action.payload } }, }, // reducers 异步更新 类似于vuexactions efffects: { someEffect(

    1.2K30

    Rematch: Redux 重新设计

    让我们看看使用React等基于组件视图框架/库时选项: 1. Component State (组件状态) 存在于单个组件内部状态。在React中,通过setState方法更新state。...中间件是可以侦听传入动作函数,支持诸如“logger”,“devtools”“syncWithServer”侦听器之类工具。 订阅是用于广播这些状态更改函数。...将 Redux 视为一个带有更新前/更新后钩子全局对象,以及能够以简单方式合成新状态Redux 是不是太复杂了? 是的。...简化 reducers Redux reducers 可以通过一个转换,让我们远离已经习惯但不必要且冗长 switch 语句。...6.reducers 即 action creators 按照使用方式,把 Redux 中所涉及概念进行合并分组,那么我们可以得出下面这个更简单模式。

    1.6K50
    领券