Redux-thunk的实现原理
最新回答
浪徒
2021-01-10 08:04:17
Redux-thunk 是 Redux 的一个中间件，其核心实现原理是通过判断 action 的类型来决定是直接派发 action 还是执行函数。以下是其实现原理的详细解析：
1. 核心逻辑Redux-thunk 的核心代码可简化为以下逻辑：
function thunkMiddleware(store) { const { dispatch, getState } = store; return function (next) { return function (action) { // 关键判断：如果 action 是函数，则执行它；否则继续派发 if (typeof action === 'function') { return action(dispatch, getState); } return next(action); }; };}- 判断 action 类型：当通过 dispatch 派发一个 action 时，thunk 会检查该 action 是否为函数：
如果是函数：调用该函数，并传入 dispatch 和 getState 作为参数，允许在函数内执行异步操作或多次派发 action。
如果是普通对象：直接调用 next(action)，将 action 传递给下一个中间件或 Reducer。
中间件注册：Redux-thunk 通过 applyMiddleware 注入到 Redux 的中间件链中，拦截所有 dispatch 调用。
高阶函数嵌套：
外层函数接收 store 对象，解构出 dispatch 和 getState。
中层函数接收 next（下一个中间件的 dispatch 方法）。
内层函数接收 action，执行类型判断。
函数型 Action 的执行：当 action 是函数时，thunk 会调用它并传入 dispatch 和 getState，例如：
// 函数型 Action 示例const fetchData = () => async (dispatch) => { const data = await api.getData(); dispatch({ type: 'DATA_LOADED', payload: data });};
- 原生 Redux：仅支持派发普通对象（Plain Object）作为 action，无法处理异步逻辑。
- Redux-thunk：通过扩展 dispatch 的能力，支持函数型 action，从而在函数内部处理异步操作（如 API 调用）、条件派发或延迟派发。
以下是简化版的 Redux-thunk 实现：
const thunk = (store) => { const { dispatch, getState } = store; // 重写 dispatch 方法 store.dispatch = function (action) { if (typeof action === 'function') { return action(dispatch, getState); } // 默认行为：直接派发对象型 action return dispatch(action); };};// 使用示例const store = createStore(rootReducer, applyMiddleware(thunk));5. 关键点总结- 函数判断：typeof action === 'function' 是 thunk 的核心逻辑。
- 依赖注入：函数型 action 会被传入 dispatch 和 getState，使其能访问 Redux 状态并派发新 action。
- 异步支持：通过函数型 action，可以在异步操作完成后（如 Promise 解析）再派发 action。
- 异步数据获取：在函数内调用 API，成功后派发 SUCCESS action。
- 条件派发：根据当前状态决定是否派发 action。
- 复杂逻辑封装：将多个同步 action 的派发逻辑封装到一个函数中。
通过这种机制，Redux-thunk 将 Redux 的同步数据流扩展为支持异步和复杂逻辑的中间件，同时保持了 Redux 的核心原则（如纯函数 Reducer）。
热门标签
