首页
学习
活动
专区
工具
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 为前缀保证唯一性即可。

    45720

    React全家桶之Redux使用

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

    1.3K20

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

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

    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

    13010

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

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

    8.5K20

    用 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.5K40

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

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

    3K61

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

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

    1.3K10

    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 更新 这个流程再多加流程,它们的最终目的都是为了更自动化地管理状态/数据,相信理解了这个思路再看那些

    78420

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

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

    1.2K30

    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

    51520

    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

    玩转 React 服务器端渲染

    2 分钟了解 Redux 是如何运作的 关于 Store: 整个应用只有一个唯一的 Store Store 对应的状态树(State),由调用一个 reducer 函数(root reducer)生成...state, action)两个参数,返回一个新的 state reducer 函数判断action.type然后处理对应的action.payload数据来更新状态树 所以对于整个应用来说,一个 Store.../reducers/index.js rootReducer的state参数就是整个 Store 的状态树,状态树下的每个字段对应也可以有自己的 reducer,所以这里引入了listReducer和itemReducer.../reducers/list.js 然后是 ....另外因为涉及到异步请求,这里的 action 用到了 thunk,也就是函数,redux 通过thunk-middleware来处理这类 action,把函数当作普通的 action dispatch

    2.4K80
    领券