Redux中间件中dispatch的可访问性及实现原理咨询

嘿，我来帮你把这个问题掰明白！你猜的没错——Redux中间件能访问dispatch和getState，确实是createStore在初始化阶段一手安排的，咱们结合你的thunk中间件代码来拆解：

核心逻辑：applyMiddleware与createStore的协作 #

当你用createStore(reducer, applyMiddleware(thunkMiddleware))创建store时，applyMiddleware本质是一个store增强器（store enhancer），它会拦截并修改createStore的默认行为，核心步骤如下：

• 先创建基础store实例：applyMiddleware内部会先调用原始的createStore生成一个基础store，拿到它的原始dispatch和getState方法。
• 给中间件注入核心方法：遍历你传入的所有中间件，把dispatch和getState作为参数传递给每个中间件的外层函数——也就是你代码里的({ dispatch, getState }) => ...这部分。
• 构建中间件链：把所有中间件串联起来，最终生成一个被中间件增强后的新dispatch方法，替换掉基础store的原始dispatch。

你的thunk代码逐行解析 #

咱们看你写的这段代码：

function createThunkMiddleware(extraArgument) {
  console.log('createThunkMiddleware =================', extraArgument)
  // 这里访问不到dispatch，因为此时中间件还没被初始化！
  // console.log('dispatch =================', dispatch)
  
  return ({ dispatch, getState }) => next => action => {
    console.log('just above dispatch', dispatch)
    // 这里能拿到dispatch，因为这层函数是applyMiddleware在初始化时调用的
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }
    return next(action);
  };
}

• 外层的createThunkMiddleware(extraArgument)只是一个中间件工厂函数：调用它的时候，Redux还没完成store的初始化，自然拿不到dispatch——这就是你外层打印dispatch会报错的原因。
• 返回的({ dispatch, getState }) => ...才是真正的中间件函数：当applyMiddleware处理这个中间件时，会把刚创建好的store的dispatch和getState注入进来，所以这层里就能正常访问到它们了。
• 最内层的next => action => ...：这里的next是中间件链里的下一个dispatch方法（可能是下一个中间件的处理函数，也可能是原始的store.dispatch），action就是你调用store.dispatch时传入的内容。

一句话总结 #

中间件里的dispatch不是凭空出现的，是createStore通过applyMiddleware这个增强器，在store初始化阶段主动注入给每个中间件的。只有当中间件被applyMiddleware处理时，这两个核心方法才会被传递进来~

内容的提问来源于stack exchange，提问作者Shubham