已应用Redux Thunk仍报‘Actions must be plain objects’错误求助

问题核心排查 #

你遇到的报错本质还是Thunk中间件未被正确应用到Redux Store中——虽然你已引入thunk，但Store增强器的组合方式存在问题，导致Thunk未生效。

关键修复点：Store增强器的正确组合 #

你的store.js中嵌套使用compose和composeWithDevTools，会导致中间件执行顺序错误，Thunk无法被正确加载。

错误写法：

const composedEnhancer = compose(composeWithDevTools(), applyMiddleware(thunk, logger.default));

正确写法：
composeWithDevTools本身已集成compose功能，直接将applyMiddleware作为参数传入即可：

const composedEnhancer = composeWithDevTools(applyMiddleware(thunk, logger.default));

若需添加其他增强器，可依次传入composeWithDevTools：

const composedEnhancer = composeWithDevTools(
  applyMiddleware(thunk, logger.default),
  // 其他增强器...
);

额外验证与优化 #

1. 版本兼容性：确保redux-thunk为v2.x及以上版本，与Redux v4.x兼容。
2. Thunk Action优化：你的register函数无需async关键字（内部使用回调而非await），可简化为：

   export const register = (registerData) => {
     return (dispatch) => {
       userPool.signUp(registerData.email, registerData.password, registerData.attributeList, null, (error, result) => {
         if (error) {
           return dispatch(displayError(error));
         } else {
           return dispatch(addUser(result.user));
         }
       });
     }
   }
   

3. Store注入验证：你的index.js已通过Provider正确注入Store，这部分无需修改。

修复后的完整Store代码 #

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import { composeWithDevTools } from 'redux-devtools-extension';

import rootReducer from './services/reducers/root_reducer.js';

const composedEnhancer = composeWithDevTools(applyMiddleware(thunk, logger.default));

const configureStore = (preloadedState = {}) => {
  return createStore(rootReducer, preloadedState, composedEnhancer);
};

export default configureStore;

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