前端/移动开发面试题更新 2026-08-05

在 Redux 中,中间件是如何获得 store 和 action 的?请描述其内部处理流程。

前端/移动开发技术原理Redux

考察说明

考查对 Redux 中间件机制的理解,包括其如何获取 store 和 action 以及如何处理。

回答思路

  1. 【回答框架 1】Redux 中间件是通过 applyMiddleware 函数应用到 store 上的。applyMiddleware 接收中间件数组,并在创建 store 时,通过 compose 将多个中间件组合成一个链式调用结构。每个中间件都会被调用一次,并接收一个包含 getState 和 dispatch 的对象,这就是中间件获取 store 相关能力的方式。
  2. 【回答框架 2】中间件函数返回一个函数,该函数接收 next 参数。这个 next 是下一个中间件的 dispatch 函数,或者在没有更多中间件时是原始的 store.dispatch。中间件通过闭包捕获 store 的 getState 和 dispatch,因此可以在 action 被派发时调用 getState 获取当前状态,或者调用 dispatch 派发新的 action。
  3. 【回答框架 3】当 action 被派发时,dispatch 会沿着中间件链依次传递 action。每个中间件可以检查 action 的类型或内容,执行相应的逻辑(如日志记录、异步请求),然后调用 next(action) 将控制权传递给下一个中间件,或者直接返回/调用 dispatch 来终止或重新派发 action。
  4. 【回答框架 4】最终,当 action 经过所有中间件后,会到达原始的 reducer 处理逻辑,更新 state。整个过程保证了 action 的流式处理,中间件不直接操作 store,而是通过 getState 和 dispatch 间接访问。
  5. 【关键点 1】中间件通过 applyMiddleware 应用,接收包含 getState 和 dispatch 的对象作为参数。
  6. 【关键点 2】中间件返回的函数接收 next 参数,用于传递 action 到下一个中间件或 reducer。
  7. 【关键点 3】中间件可以决定是否调用 next(action) 来继续传递 action,或使用 dispatch 重新派发。
  8. 【关键点 4】中间件可以使用 getState 获取当前状态,但不能直接修改状态。
  9. 【易错点 1】在中间件中直接调用 dispatch 可能导致无限循环,需谨慎控制终止条件。
  10. 【易错点 2】不要假设 next 一定是原始的 store.dispatch,它可能是下一个中间件的 dispatch。
  11. 【易错点 3】中间件的获取 store 和 action 的方式与 redux-thunk 等第三方库有所不同,需区分。