rudux中间件

Redux-Thunk


❓ 为什么需要 Redux-Thunk?

在没有 Redux-Thunk 的情况下,Redux 的 Action 必须是普通对象,且必须同步派发。这导致以下问题:

  • 异步操作无法处理:例如 API 请求需要在请求完成后,派发成功或失败的 Action。
  • 副作用难以管理:如访问本地存储、设置定时器等。

通过 Redux-Thunk,Redux 的 Action可以是一个函数,异步逻辑封装函数中,函数最后返回拿到结果的action对象,给reducer 的switch 用。


它位于 Action 到达 Reducer 之前,可以拦截、处理或增强 Action。


源码极其简单

js 复制代码
const thunk = ({ dispatch, getState }) => (next) => (action) => {
  if (typeof action === 'function') {
    // 如果 Action 是函数,执行它并传入 dispatch 和 getState
    return action(dispatch, getState);
  }
  // 否则,交给下一个中间件或 Reducer 处理
  return next(action);
};
  • 如果 Action 是一个普通对象,直接放行,交给后续中间件或 Reducer 处理。
  • 如果 Action 是一个函数,则执行这个函数,并将 dispatch 和 getState 作为参数传递给它。

定义

js 复制代码
actions/index.js

export const incrementFather = () => {
  return async dispatch => {
    await delay() // 异步操作
    dispatch({ type: 'FATHER' }) // 分发同步 action
  }
}

使用

js 复制代码
import { incrementSon } from '../../store/actions/index'

const handleClick = () => {
  dispatch(incrementSon())
}

action reduxLogger输出 调用两次的原因


不用 Redux-Thunk ,如何处理异步事件

1:直接在组件中处理异步(适用于简单场景)

缺点:业务逻辑耦合在组件中,难以复用和测试

js 复制代码
// 组件中直接处理异步(如 React 组件)
import { useDispatch } from 'react-redux';
import { fetchDataSuccess, fetchDataFailure } from './actions';

const Component = () => {
  const dispatch = useDispatch();

  const handleClick = async () => {
    try {
      const response = await fetch('/api/data');
      const data = await response.json();
      dispatch(fetchDataSuccess(data));
    } catch (error) {
      dispatch(fetchDataFailure(error));
    }
  };

  return <button onClick={handleClick}>Load Data</button>;
};
相关推荐
qq_4335545411 小时前
C++ 双向循环链表
开发语言·c++·链表
JA+11 小时前
vue 实时数据表格组件 (stk-table-vue)
前端·javascript·vue.js
一只侯子11 小时前
Tuning——CC调试(适用高通)
开发语言·图像处理·笔记·学习·算法
丁浩66611 小时前
Python机器学习---1.数据类型和算法:线性回归
开发语言·python·机器学习·线性回归
那年窗外下的雪.11 小时前
鸿蒙ArkUI布局与样式进阶(十二)——自定义TabBar + class类机制全解析(含手机商城底部导航案例)
开发语言·前端·javascript·华为·智能手机·harmonyos·arkui
马拉萨的春天12 小时前
探索Objective-C中的对象复制:深入理解copy和mutableCopy
开发语言·ios·objective-c
啊森要自信12 小时前
【MySQL 数据库】使用C语言操作MySQL
linux·c语言·开发语言·数据库·mysql
Rysxt_12 小时前
Electron 与 uni-app 区别教程:如何选择适合你的跨平台开发框架?
javascript·electron·uni-app·跨平台
前端架构师-老李12 小时前
15、Electron专题:使用 electron-store 进行本地数据存储
前端·javascript·electron
小白学大数据12 小时前
双管齐下:结合显式等待与Timeout处理复杂Ajax网页
前端·javascript·ajax