建站模板 powered by discuz朋友圈广告投放
Redux-Thunk
❓ 为什么需要 Redux-Thunk？
在没有 Redux-Thunk 的情况下，Redux 的 Action 必须是普通对象，且必须同步派发。这导致以下问题：
- 异步操作无法处理：例如 API 请求需要在请求完成后，派发成功或失败的 Action。
- 副作用难以管理：如访问本地存储、设置定时器等。
通过 Redux-Thunk，Redux 的 Action可以是一个函数，异步逻辑封装函数中，函数最后返回拿到结果的action对象，给reducer 的switch 用。
它位于 Action 到达 Reducer 之前，可以拦截、处理或增强 Action。
源码极其简单
const thunk = ({ dispatch, getState }) => (next) => (action) => {if (typeof action === 'function') {// 如果 Action 是函数，执行它并传入 dispatch 和 getStatereturn action(dispatch, getState);}// 否则，交给下一个中间件或 Reducer 处理return next(action);
};
- 如果 Action 是一个普通对象，直接放行，交给后续中间件或 Reducer 处理。
- 如果 Action 是一个函数，则执行这个函数，并将 dispatch 和 getState 作为参数传递给它。
定义
actions/index.jsexport const incrementFather = () => {return async dispatch => {await delay() // 异步操作dispatch({ type: 'FATHER' }) // 分发同步 action}
}
使用
import { incrementSon } from '../../store/actions/index'const handleClick = () => {dispatch(incrementSon())
}
action reduxLogger输出 调用两次的原因
不用 Redux-Thunk ，如何处理异步事件
1：直接在组件中处理异步（适用于简单场景）
缺点：业务逻辑耦合在组件中，难以复用和测试
// 组件中直接处理异步（如 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>;
};