rudux中间件

回村中年2025-03-27 13:18

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>;
};