Redux中间件实现是否正确？redux-thunk应用验证求助

从你贴的代码片段来看，导入部分是没问题的——正确引入了Redux核心方法、redux-thunk和redux-logger。不过要确认Thunk是否正确应用，还得看你创建store的完整代码。我先给你一个标准的正确实现模板，你可以对照自己的代码检查：

import { createStore, applyMiddleware, combineReducers, compose } from 'redux';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
// 替换成你实际的reducer导入路径
import { inventoryFilter, availableAt } from './reducers';

// 合并所有reducer为根reducer
const rootReducer = combineReducers({
  inventoryFilter,
  availableAt
  // 这里添加其他reducer...
});

// 构建中间件数组，Thunk必须在这里加入
const middleware = [thunk];

// 开发环境下加入logger（注意logger要放在最后，保证能捕获所有处理后的action）
if (process.env.NODE_ENV !== 'production') {
  middleware.push(createLogger());
}

// 兼容Redux DevTools（开发时必备，避免和中间件冲突）
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

// 核心步骤：用applyMiddleware包裹中间件，传入createStore
const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(...middleware))
);

export default store;

几个容易踩坑的关键点： #

• 必须把thunk加入中间件数组：如果漏了这一步，异步action创建函数返回的函数根本不会被处理，自然无法拿到dispatch
• 正确使用composeEnhancers：如果直接用compose而不是兼容DevTools的版本，可能会导致中间件和DevTools冲突，影响Thunk的正常工作
• logger的顺序：redux-logger要放在中间件数组的最后，因为中间件是链式执行的，logger需要捕获前面所有中间件处理后的最终action

如果你的store创建逻辑和上面一致，但还是无法传递dispatch作为函数，那问题可能出在其他地方：比如你的异步action创建函数没有正确返回一个接收dispatch的函数，或者组件没有正确连接Redux（比如用connect时没映射dispatch，或者用useDispatch时的调用方式不对）。

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