使用Redux提交表单时出现Actions必须是纯对象错误排查

针对你遇到的错误，结合提供的代码和"刷新页面后可正常提交"的现象，给出以下排查和解决步骤：

1. 修复Store的Compose配置（优先级最高） #

你的Store创建代码未兼容Redux DevTools的增强器，可能导致redux-thunk中间件在某些情况下未被正确注入，刷新后DevTools状态重置，中间件才生效。修改Store创建代码：

import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducers from './reducers';

// 优先使用DevTools的compose，否则用默认compose
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancers(applyMiddleware(thunk)));

2. 检查组件中Dispatch Action的写法 #

确保你没有直接调用action creator并dispatch其返回值（Promise），正确的写法是将action creator传递给dispatch，由thunk处理：

// 组件中的正确示例
import { createPosts } from './path/to/actions';
import { useDispatch } from 'react-redux';

const PostForm = () => {
  const dispatch = useDispatch();

  const handleSubmit = (postData) => {
    // ✅ 正确：传递action creator给dispatch
    dispatch(createPosts(postData));
    
    // ❌ 错误：直接调用action creator，返回Promise并dispatch
    // dispatch(createPosts(postData)());
  };
};

3. 确认Action的导出与导入一致 #

你的createPosts是命名导出，组件中必须使用命名导入：

// ✅ 正确：命名导入
import { createPosts } from './actions';

// ❌ 错误：默认导入（如果action是命名导出的话）
// import createPosts from './actions';

4. 检查Dispatch的调用时机 #

避免在组件渲染阶段直接调用dispatch，确保dispatch仅在事件处理函数（如表单提交）或useEffect等生命周期钩子中执行：

// ✅ 正确：放在表单提交事件中
const handleSubmit = (e) => {
  e.preventDefault();
  dispatch(createPosts(postData));
};

// ❌ 错误：渲染时直接调用（可能在Store未完全初始化时触发）
dispatch(createPosts(postData));

内容的提问来源于stack exchange，提问作者Süleyman Eminbəyli